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

96
一个被床封印的程序猿
2017.11.04 15:18* 字数 706

起因:
由于公司项目需要支持 打卡图片保存到本地功能,所以,需要单独截取页面中的图片信息,并且保存到本地。(主要我们的应用场景在微信上,最后呢在微信上模拟下载完全不行。在电脑上调试下载图片是可以的。(求推荐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">
</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>


效果图:

image.png

写在最后:

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

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

最后打个广告

青团社招聘:

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

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

职位描述:

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

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

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

日记本
Gupao