前端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文件（代码看下面）