网页端页面截图【含 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源码如下：

//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">
</style>
<template>
<div>
    <div v-if="isImage">
        <img class="background" src="https://ojlf2aayk.qnssl.com/20171110back.png" alt="">
        <div class="playCard" v-show="isShow" ref="imageInfo">
            <img class="backgroundimg" :src="getData.backgroundImg" alt="">
            <div class="contents">
                <div class="headimg">
                    <img :src="getData.headImg" alt="">
                </div>
                <div class="palycardtime">
                    <div class="playCardleft">
                        <div class="playcardtip">{{getData.signTitle}}</div>
                        <div class="playcardata"><span>{{getData.continuousSign}}</span>{{getData.signUnit}}</div>
                        <div class="playcartime">{{getData.date}}</div>
                    </div>
                    <div class="playCardright">
                        <div class="qrcode" ref="qrcodes"></div>
                        <div class="morepeople">{{getData.desc}}</div>
                    </div>
                    <div class="downtips">
                        <img :src="getData.companyLogo" alt="">
                        <div class="playtips">{{getData.title}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <img :src="image" v-else>
</div>
</template>
<script>
import util from 'util'
import toast from 'toast'
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import {
    Indicator
} from 'mint-ui'
export default {
    data() {
        return {
            getData: {},
            isShow: false,
            image: '',
            isImage: true
        }
    },
    methods: {
        initData() {
            Indicator.open('签到中...')
            this.$axios.post('xxx').then((res) => {
                if (res.success) {
                    this.getData = res.data
                    this.getQrCode()
                    this.isShow = true
                } else {
                    toast(res.msg)
                }
            })
        },
        savaImage() {
            let that = this
            var opts = {
                scale: 2, // 添加的scale 参数
                useCORS: true // 【重要】开启跨域配置
            }
            html2canvas(document.getElementById('app'), opts).then((canvas) => {
                Indicator.close()
                canvas.id = 'canvasId'
                document.getElementById('app').appendChild(canvas)
                document.getElementById('canvasId').style.display = 'none'
                that.isImage = false
                that.image = canvas.toDataURL()
            })
        },
        getQrCode() {
            var qrcode = new QRCode(this.$refs.qrcodes, {
                text: this.getData.qrCodeUrl,
                width: 70,
                height: 70,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
            setTimeout(() => {
                this.savaImage()
            }, 500)
        }
    },
    mounted() {
        this.initData()
    }
}
</script>

效果图：

8E3C1639-D70B-414A-85F6-4AF6EC15A519.png

写在最后：

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