网页端页面截图【含 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（电脑上调试）
代码：

<style lang="less" scoped>
img {
    width: 100%;
}
.savaImage {
    width: 60%;
    margin-left: 20%;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    color: #FFF;
    background: #00cc88;
    font-size: 0.16rem;
    border-radius: 1rem;
}
</style>
<template>
<div>
    <div class="" ref="Userimages">
         <img src="http:https://img.haomeiwen.com/i5116580/e94cfa8c5f52e28d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240/>
        <div class="">我看看我能不能和图片一起变成一张图片</div>
    </div>
    <div class="savaImage" @click="downLoadImg">保存图片</div>
    <img src="imgurl“/>(要被和谐src前面有个冒号)
</div>
</template>
<script>
import domtoimage from 'dom-to-image'
export default {
    data() {
        return {
          imgurl: ''
        }
    },
    methods: {
        savaImage() {
            var node = this.$refs.Userimages
            domtoimage.toPng(node).then((dataUrl) => {
                var img = new Image()
                img.src = dataUrl
                this.imgurl = img.src
            })
        }
    },
    mounted() {}
}
</script>

效果图：

image.png

写在最后：

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

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

最后打个广告

青团社招聘：

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

简历投递到：hr@qtshe.com || haochen@qtshe.com

职位描述：

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

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

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