前端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…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？
🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
（十）学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
Frozen-Flask ：将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。 如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外，还提供了基于网页版的 ESP LA…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...