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

凉红茶

已于 2023-07-28 20:28:32 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：插件使用文章标签： html2canvas dom-to-image 前端截图

于 2023-07-28 17:15:49 首次发布

本文链接：https://blog.csdn.net/weixin_40682842/article/details/131983468

本文介绍了前端实现截图的需求及痛点，详细比较了html2canvas和dom-to-image-more两个库的优缺点。在遇到html2canvas的截图延迟、样式错乱等问题后，作者转向使用dom-to-image-more，虽然存在一些问题，但总体表现更优。文章还分享了截图知识点，包括Canvas和SVG截图原理，并提供了使用教程和解决跨域问题的方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

需求

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

历劫过程

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

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

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

图片中svg-icon（雪碧图组件）空白
系统中图片采用阿里云服务器存储，需要修改js文件（代码看下面）
background背景样式需要稍微做修改
截图时间按页面复杂程度决定，如果存在图片多的话，会慢很多，因为它会去请求各种图片的接口

总而言之，个人感觉dom-to-image-more更好一些，截屏更加全面且错误率更少点。

截图知识点

前端的两种截图方式：1、Canvas截图，通过遍历DOM克隆一份副本，将此副本在Canvas上重新绘制，并根据DOM的样式应用在对应的绘制元素上，再通过Canvas生成图片。转换过程可理解成：DOM→Canvas→Image，例如html2canvas。

2、SVG截图，通过遍历DOM克隆一份副本，利用SVG的foreignObject把DOM作为外部资源嵌套在SVG中，将此SVG在Canvas上重新绘制，并根据DOM的样式应用在对应的绘制元素上，再通过Canvas生成图片。转换过程可理解成：DOM→SVG的ForeignObject→Canvas→Image，例如dom-to-image-more。

总结：两种前端截图方式最后都是通过把DOM绘制到Canvas，再通过Canvas输出图片。

html2canvas

文档地址

Options | html2canvas

封装

import html2Canvas from 'html2canvas'
import { getToken } from '@/utils/auth'

export default {
  install(Vue, options) {
    Vue.prototype.GetCanvasToImg = function() {
      let pa