目录
需求
历劫过程
截图知识点
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文件(代码看下面)