网页端页面截图【含 domtoimage、html2canvas 】

起因：
由于公司项目需要支持 打卡图片保存到本地功能，所以，需要单独截取页面中的图片信息，并且保存到本地。（主要我们的应用场景在微信上，最后呢在微信上模拟下载完全不行。在电脑上调试下载图片是可以的。（求推荐H5下载图片的方法）长按保存除外哈哈哈）
推荐给：需要获取页面内容，给页面截图的小伙伴
介绍两个工具：
html2canvas
官方地址：https://github.com/niklasvh/html2canvas
优点：
1.使用人数多，资料更全

缺点：
1.感觉不怎么维护更新了
domtoimage
官方地址【github例子很全了】：https://github.com/tsayen/dom-to-image
优点
1.有人维护
2.git活跃，作者发言
3.使用方便
缺点：
1.新控件，使用人数少,资料不全
2.IOS手机不能截图，污染了canvas.toDataURL会报错【目前还没解决】（参考链接：https://github.com/tsayen/dom-to-image/issues/40）
报错信息如下："SECURITY_ERR: DOM Exception 18: The operation is insecure"
修改dom-to-image.js源码如下：
1.新控件，使用人数少,资料不全
2.IOS手机不能截图，污染了canvas.toDataURL会报错【目前还没解决】
（参考链接：[https://github.com/tsayen/dom-to-image/issues/40] (https://github.com/tsayen/dom-to-image/issues/40)
报错信息如下："SECURITY_ERR: DOM Exception 18: The operation is insecure"
修改dom-to-image.js源码如下：

//IOS兼容   
function toPng(node, options) {  
    return draw(node, options || {})  
        .then(function(result) {  
            try {  
                // 原来的  
                var image = result.canvas.toDataURL("image/png", 1.0);  
                return image;  
  
                // 改为svg更清楚  
                // console.log(result.svg.src);  
                // return result.svg.src;  
            } catch (err) {  
                console.warn(err);  
                // alert(result.svg.src);  
                // console.log(result.svg.src);  
                return "error";  
            }  
        });  
}  

最终方案选择：
参考了很多资料，最后决定IOS使用html2canvas ，Android使用domtoimage（电脑上调试）
代码：

效果图：

image.png

写在最后：

domtoimage 和 html2canvas截图PNG格式，都会损失部分图片精度，使图片变模糊。
如果不是在移动端的话，建议使用SVG格式，更为清晰。
两个插件个人更喜欢 domtoimage ~

放上成功页面地址： https://m.qtshe.com/app/punchday

最后打个广告

青团社招聘：

招聘岗位：资深前端开发工程师

简历投递到：[email protected] || [email protected]

职位描述：

1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量

2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案

3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界