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

VIP文章 已于 2023-07-28 20:28:32 修改
阅读量544 收藏
点赞数
分类专栏： 插件使用 文章标签： html2canvas dom-to-image 前端 截图
于 2023-07-28 17:15:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40682842/article/details/131983468
版权

目录

需求

历劫过程

截图知识点

html2canvas

文档地址

封装

使用教程 

dom-to-image-more

文档地址

封装

使用教程

解决跨域问题

以下是我花了大把时间，薅秃头得出来的最终结果， dom-to-image-more截图时间快到可以让复杂的页面仅需2-3S就能完成截图，内容有点多，请保持耐心慢慢看。

需求

用户想要反馈平台当前页面的各种问题，所以系统的反馈功能需要提供一个一键截图并上传图片的功能。

历劫过程

一开始系统使用的是html2canvas，但是会出现以下一些问题：

  • 截图时间过长
  • 图片会出现样式错乱
  • 不能支持截取micoapp嵌入的页面
  • 图片内数据缺失

后来，准备替换掉这个组件，开始调研，发现dom-to-image组件看着还不错的样子，但是据说也存在一些问题，而它的升级版dom-to-image-more优化了不少功能，所以开始采用dom-to-image-more，不过调研过程中，也发现它存在一下问题：<

最低0.47元/天 解锁文章
凉红茶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dom-to-image.js
07-27
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
domtoimage.js
07-31
domtoimage图片下载插件,用于将dom节点转换成图片,然后就可以下载下来
使用dom-to-image-more生成页面截图
SomesoneH的博客
02-29 464
关于公司自研的低代码开发平台，产品在某个迭代版本里，要求增加设计成果的规范化导出，其中一环是需要在流程设计编辑器保存时，生成截图并上传，了解了几种实现方式后决定用dom-to-image-more来实现。
dom截图——探究长截图的极限
CarveStone的博客
01-03 1062
问题：使用dom-to-image和html2canvas来进行长截图会出现一个问题，如果图片非常长，一些图片会只加载一半，如果图片再长一些，截图就会为空。核心思想：把如下图所示拆分的dom分别使用dom-to-image截图，再通过canvas合并图片，最后下载。方法一：按理说应该能无限长的，但是浏览器扛不住，我的测试结果是截图大小在18mb左右，再大一些就不输出了。图片缺失这个情况还可以优化，可以想办法把dom进行拆分，再分别截图，最后拼接图片。目前我测试的结果：截图的大小在8mb出现图片缺了的情况。
dom-to-image 将vue中未显示的组件转成图片， 并上传
HYeeee的博客
07-19 6264
1、基本使用 npm地址 import domtoimage from 'dom-to-image' export function dom2img(node) { return domtoimage.toPng(node, { cacheBust: true }) .then(function(dataUrl) { var img = new Image(); img.src = dataUrl; document.body.appendChild(img
DOM转成img图片(dom-to-image)
qq_45750213的博客
01-16 467
安装并引用方法：print(){
关于网站截图功能的几种方案
inksnowHL的博客
10-25 1173
浏览器进行截图的三种前端方案，这里在vue3中去示例
html2canvas dom-to-image dom-to-image-more html-to-image生成图片踩坑小记
April_99的博客
04-23 1351
最终，不这还没到最终，我引入这个库以后，生成图片之前先将表格宽度加到最大，不让table内部存在滚动条，而是直接利用整个视窗的滚动条。然后我梦寐以求的iOS生成图片终于实现了。最后的方案是：创建一个新的Canvas对象，设置它的宽高与图片的宽高相同，然后将图片绘制在画布上，并将画布转换为base64格式的URL。就在我一筹莫展之际，chat告诉我还有dom-to-image-more这玩意儿，是dom-to-image的优化版本，很好的解决了iOS的兼容性问题...很好，说干就干，而且看到。
dom-to-image-more 使用
Sengoku_Xingzi的博客
01-24 516
这里不会出现两行缩略不行的bug。下面 生成图片并下载图片。
Vue整合Dom-To-Image，实现截图并下载文件
Hello World
12-08 1167
*Vue整合Dom-To-Image，实现截图并下载文件* 1.npm相关模块 2.在页面（.vue）直接引入 3.相关实现代码 ①截图并下载，生成.png格式 ②截图并下载，生成.svg格式 ③其它属性 总结
domtoimage使用HTML5canvas从DOM节点生成图像
08-10
dom-to-image：使用HTML5 canvas从DOM节点生成图像
dom-to-pdf:使用HTML5 canvas和svg从DOM节点生成可打印的分页pdf
04-29
dom-to-pdf使用HTML5 canvas和svg从DOM节点生成可打印的PDF。 安装 npm install --save dom-to-pdf 用法 var domToPdf = require ( 'dom-to-pdf' ) ; var element = document . getElementById ( 'test' ) ; var ...
dom-to-pdf:为HTML DOM元素提供优化的PDF输出
03-13
DOM到PDF 提供HTML代码段的PDF输出。图书馆使用HTML2Canvas，jsPDF和jQuery。局限性从画布生成图像时，图像质量降低。
html2canvas-1.0.0-rc.4版本
01-13
html2canvas-1.0.0-rc.4版本
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 476
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 630
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 678
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 853
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
html2Canvas直接生成图片
07-27
html2Canvas是一个前端开源库，可以通过读取网页上的目标DOM节点的信息去绘制一个canvas，然后再通过调用canvas的toDataURL()方法生成图片。\[1\]相比于使用Canvas原生API来生成图片，html2Canvas更加简便，节省了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值