前端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…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中，push 和 present 是两种不同的视图控制器切换方式，它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
Python 实现 Web 静态服务器（HTTP 协议）
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1）下载安装包2）配置环境变量3）安装镜像4）node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1）使用 http-server2）详解 …...
MySQL：分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区（Partitioning）是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分（分区）可以独立存储、管理和优化，…...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ，这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器，右键点击 .uproject 文件，选择 "Generate Visual Studio project files"，重…...
32单片机——基本定时器
STM32F103有众多的定时器，其中包括2个基本定时器（TIM6和TIM7）、4个通用定时器（TIM2~TIM5）、2个高级控制定时器（TIM1和TIM8），这些定时器彼此完全独立，不共享任何资源 1、定…...