前端html2canvas和dom-to-image实现截图功能
目录
需求
历劫过程
截图知识点
html2canvas
文档地址
封装
使用教程
dom-to-image-more
文档地址
封装
使用教程
解决跨域问题
以下是我花了大把时间，薅秃头得出来的最终结果， dom-to-image-more截图时间快到可以让复杂的页面仅需2-3S就能完成截图，内容有点多，请保持耐心慢慢看。
需求
用户想要反馈平台当前页面的各种问题，所以系统的反馈功能需要提供一个一键截图并上传图片的功能。
历劫过程
一开始系统使用的是html2canvas，但是会出现以下一些问题：
- 截图时间过长
- 图片会出现样式错乱
- 不能支持截取micoapp嵌入的页面
- 图片内数据缺失
后来，准备替换掉这个组件，开始调研，发现dom-to-image组件看着还不错的样子，但是据说也存在一些问题，而它的升级版dom-to-image-more优化了不少功能，所以开始采用dom-to-image-more，不过调研过程中，也发现它存在一下问题：
- 图片中svg-icon（雪碧图组件）空白
- 系统中图片采用阿里云服务器存储，需要修改js文件（代码看下面）
相关文章：
前端html2canvas和dom-to-image实现截图功能
目录 需求 历劫过程 截图知识点 html2canvas 文档地址 封装 使用教程 dom-to-image-more 文档地址 封装 使用教程 解决跨域问题 以下是我花了大把时间，薅秃头得出来的最终结果， dom-to-image-more截图时间快到可以让复杂的页面仅需2-3S就能完成截图，内容有点多…...
Hadoop平台集群之间Hive表和分区的导出和导入迁移（脚本）
要编写Shell脚本实现两个Hadoop平台集群之间Hive表和分区的导出和导入迁移 你可以使用Hive的EXPORT和IMPORT命令结合Hadoop的DistCp命令。下面是一个示例脚本： #!/bin/bash# 导出源Hive表的数据到HDFS source_hive_table"source_db.source_table" targe…...
Linux C语言实践eBPF
手动编译了解过程 通过对关键步骤make Msamples/bpf的实践，我们已经可以编译出内核源码中提供的ebpf样例。但这还不够我们充分地理解这个编译过程，我们将这编译过程拆解一下，拆解成可以一步步执行的那种，首先是环境准备ÿ…...
垃圾回收标记阶段算法
1.标记阶段的目的 主要是在GC在前，判断出哪些是有用的对象，哪些是需要回收的对象，只有被标记为垃圾对象，GC才会对其进行垃圾回收。判断对象是否为垃圾对象的两种方式：引用计数算法和可达性分析算法。 2.引用计数算法…...
泰晓科技发布 Linux Lab v1.2 正式版
导读近日消息，Linux Lab 是一套用于 Linux 内核学习、开发和测试的即时实验室，官方称其“可以极速搭建和使用，功能强大，用法简单”。 自去年 12 月份发布 Linux Lab v1.1 后，v1.2 正式版目前已经发布于 GitHub 及 Gite…...
王道数据结构-代码实操1（全注解版）
#include<stdio.h>void loveyou(int n){ // 传入参数类型为int型，在此函数中表示为n；返回值类型为void，即没有返回值； int i1; //定义了一个整数型变量i，且只在loveyou函数中有用；while(i…...
flink写入到kafka 大坑解析。
1.kafka能不能发送null消息？ 能！ 2 flink能不能发送null消息到kafka？ 不能！ public static void main(String[] args) throws Exception {StreamExecutionEnvironment env StreamExecutionEnvironment.getExecutionEnvironment(…...
MATLAB算法实战应用案例精讲-【深度学习】预训练模型-Subword
目录 前言 Subword 1. Subword介绍 分词器是做什么的？ 为什么需要分词？ 分词方法...
【HarmonyOS】实现从视频提取音频并保存到pcm文件功能（API6 Java）
【关键字】 视频提取类Extractor、视频编解码、保存pcm文件 【写在前面】 在使用API6开发HarmonyOS应用时，通常会开发一些音视频媒体功能，这里介绍如何从视频中提取音频保存到pcm文件功能，生成pcm音频文件后，就可使用音频播放类…...
Linux：shell命令运行原理和权限的概念
文章目录 shell和kernelshell的概念和原理Linux的权限文件的权限文件的类型文件的权限管理权限的实战应用 shell和kernel 从狭义上来讲，Linux是一个操作系统，我们叫它叫kernel，意思是核心，核心的意思顾名思义，就是最关…...
Javascript -- 数组prototype方法探究
一、数组prototype方法探究 1、不改变原数组 1. concat() 这个是数组拼接方法，可以将两个数组或多个数组拼接并返回一个包含两个数组或多个数组内容的新数组，不会改变原数组 方法里面理论上可以写入n个参数， const arr [1,2]; var str …...
android stduio 打开工程后直接报Connection refused解决
报错如下:Connection refused 解决方案: 打开gradle-wrapper.properties修改distributionUrl 将: distributionUrlhttp\://localhost/gradle/distributions/gradle-6.5-bin.zip 替换为: distributionUrlhttps\://services.gradle.org/distributions/gradle-6.5-bin.zip 错…...
搜索与图论(一)
一、DFS与BFS 1.1深度优先搜索(DFS) DFS不具有最短性 //排列数字问题 #include<iostream> using namespace std;const int N 10; int n; int path[N]; bool st[N];void dfs(int u) {if(u n){for(int i 0;i < n;i) printf("%d",path[i]);puts("&qu…...
百题千解计划【CSDN每日一练】“小明投篮，罚球线投球可得一分”（附解析+多种实现方法：Python、Java、C、C++、C#、Go、JavaScript）
这个心上人，还不知道在哪里，感觉明天就会出现。 🎯作者主页： 追光者♂🔥 🌸个人简介： 💖[1] 计算机专业硕士研究生💖 🌟[2] 2022年度博客之星人工智能领域TOP4🌟 🏅[3] 阿里云社区特邀专家博主🏅 🏆[4] CSDN-人工智能领域优质创作者�…...
lemon框架开发笔记
lemon框架开发笔记 JudgeUtils.isBlank() 字符串为 null 或者 "" ----返回true JudgeUtils.isNotBlankAll() 字符串全部不为 null 或者 "" ----返回true JudgeUtils.isBlankAll() 字符串全部为 null 或者 "" ----返回true// isBlank 是在isEmpt…...
Spark SQL快速入门
1. 了解Spark SQL 1.1 什么是Spark SQL Spark SQL是spark的一个模块，用于处理海量的结构化数据。 1.2 Spark SQL有什么特点？优点是什么？ 特点： Spark SQL支持读取和写入多种格式的数据源，包括Parquet、JSON、CSV、…...
linux+Jenkins+飞书机器人发送通知(带签名)
文章目录 如何使用在linux 上安装python 环境发送消息python脚本把脚本上传倒linux上 jenkins 上执行脚本 如何使用 自定义机器人使用指南飞书官网https://open.feishu.cn/document/client-docs/bot-v3/add-custom-bot 在linux 上安装python 环境 yum install python3 python…...
react hooks
1 useEffect(setup,dependencies) 使用object.is来比较每个依赖项和它先前的值 依赖项为空数组的effect不会在组件任何props和state发生改变时重新运行 当useEffect依赖于外部传入props对象时，容易造成死循环 需要对依赖对象进行深比较 import { isEqual } from…...
一起学数据结构（1）——复杂度
目录 1. 时间复杂度： 1.1 时间复杂度的概念： 1.2 时间复杂度的表示及计算： 1.3 较为复杂的时间复杂度的计算： 2. 空间复杂度： 2.1 空间复杂度的概念： 2.2 空间复杂度的计算： 1. 时间复杂度…...
＜el-date-picker＞组件选择开始时间，结束时间自动延长30min
背景：选择开始时间，结束时间自动增加30分钟，结束时间也可重新选择，如图： <el-form-item label"预约开始时间" prop"value1"><el-date-pickersize"large"v-model"ruleForm…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
Docker拉取MySQL后数据库连接失败的解决方案
在使用Docker部署MySQL时，拉取并启动容器后，有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致，包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因，并提供解决方案。 一、确认MySQL容器的运行状态 …...