前端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,前端,截图)