×

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

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

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

最后打个广告

青团社招聘:

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

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

职位描述:

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

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

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

日记本
Web note ad 1