前端html2canvas和dom-to-image实现截图功能

news/2025/2/21 4:46:37/

目录

需求

历劫过程

截图知识点

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文件(代码看下面)

http://www.ppmy.cn/news/991925.html

相关文章

mysql综合练习语法总结

mysql综合练习 用于 小白练手的主要用于以后语法忘了回来看 题目 # 1、创建数据库test01_library # 2、创建表 books,表结构如下:# 3、向books表中插入记录 # 1)不指定字段名称,插入第一条记录 # 2)指定所有字段名…

Python的判断与循环语句

目录 1、布尔类型和比较运算符 2、if语句的基本格式 If语句: if else语句: if elif else语句: 判断语句的嵌套: 实战案例 3、while循环 1. while循环的基础语法 ​​​​​​​​2. while循环的嵌套应用案例 4、for循环…

【LeetCode】152.乘积最大子数组

题目 给你一个整数数组 nums ,请你找出数组中乘积最大的非空连续子数组(该子数组中至少包含一个数字),并返回该子数组所对应的乘积。 测试用例的答案是一个 32-位 整数。 子数组 是数组的连续子序列。 示例 1: 输入: nums […

用Ubuntu交叉编译Linux内核源码并部署到树莓派4B上

参考文章 1. 配置交叉编译环境 之前在ubuntu上配置过了,直接跳过 2.获取Linux内核源码 Linux内核源码链接 到链接里面选择自己合适版本的内核源码下载下来,然后传到ubuntu中进行解压 3.Linux内核源码的配置 参考文章 厂家配linux内核源码&#xff…

41. linux通过yum安装postgresql

文章目录 1.下载安装包2.关闭内置PostgreSQL模块:3.安装postgresql服务:4.初始化postgresql数据库:5.设置开机自启动:6.启动postgresql数据库7.查看postgresql进程8.通过netstat命令或者lsof 监听默认端口54329.使用find命令查找了一下postgresql.conf的配置位置10.修改postgre…

Java在线OJ项目(三)、前后端交互API模块

Java在线OJ项目(三)、前后端交互API模块 1. 客户端向服务器请求所有题目 或者 单个题目前端获取所有题目获取一个题目 后端 2. 后端读取前端提交的代码,进行编译运行,返回结果前端提交代码后端处理 1. 客户端向服务器请求所有题目…

Flowable-中间事件-消息中间捕获事件

定义 消息中间事件指在流程中将一个消息事件作为独立的节点来运行。它是一种捕获事件,当流程 执行到消息中间事件时就会中断在这里,一直等待被触发,直接到该事件接收到相应的消息后,流 程沿后继路线继续执行。消息事件是一种引用…

数据库力扣刷题(组合两个表)

知识点 一个概念:架构,架构是指用于存储数据库对象的一个命名空间。用于管理数据库对象子集,这样极大的方便地方便并简化了管理数据库对象。 175.组合两个表 题目描述:编写一个SQL查询来报告 Person 表中每个人的姓、名、城市和州…