开发vue项目最近遇到需要截图实现页面分享，刚开始毫无头绪，H5页面如何实现截图，查阅一些资料，推荐html2canvas、domtoimage这两款组件，接下来演示一下这两款组件的使用。
1.html2canvas
1）html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。想要了解更多，阅读html2canvas官方文档
2）安装引用html2canvas
npm install html2canvas
import html2canvas from 'html2canvas';
3）实现截图
<template>
<div class="qr-code-box" ref="imageToFile">
<vue-qr :logoSrc="config.logo" :text="config.value" class="qr-code-pic" :correctLevel="3" :margin="0"
:dotScale="0.5"></vue-qr>
<button type="button" class="shot-btn" @click="screenShot">截图</button>
<img :src="img" v-if="img"/>
</div>
</template>
<script>
import VueQr from 'vue-qr';
import html2canvas from 'html2canvas'
export default {
data() {
return {
config: {
value: '',
logo: require('./r-VY-hpinrya9109218.jpg')
},
img: ""
}
},
mounted() {
this.config.value = "https://www.baidu.com/";
},
methods: {
screenShot() {
html2canvas(this.$refs.imageToFile, {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
}).then((canvas) => {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
this.img = canvas.toDataURL('image/png');
})
},
},
components: {
VueQr,
html2canvas
}
}
</script>
html2canvas可用的不同配置选项 http://html2canvas.hertzen.co…
2.domtoimage
dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量（SVG）或光栅（PNG或JPEG）图像的库。 它基于Paul Bakaus的domvas并且已被完全重写，修复了一些错误并添加了一些新功能（如Web字体和图像支持）。想要了解更多，可以阅读domtoimage的git地址
1）npm安装和引用
npm install dom-to-image
import domtoimage from 'dom-to-image';2）domtoimage方法和属性
domtoimage主要的方法有：
domtoimage.toPng(…);将节点转化为png格式的图片
domtoimage.toJpeg(…);将节点转化为jpg格式的图片
domtoimage.toSvg(…);将节点转化为svg格式的图片，生成的图片的格式都是base64格式
domtoimage.toBlob(…);将节点转化为二进制格式，这个可以直接将图片下载
domtoimage.toPixelData(…);获取原始像素值，以Uint8Array 数组的形式返回，每4个数组元素表示一个像素点，即rgba值。这个方法也是挺实用的，可以用于WebGL中编写着色器颜色。
domtoimage主要的属性有：
filter ： 过滤器节点中默写不需要的节点；
bgcolor ： 图片背景颜色；
height, width ： 图片宽高；
style ：传入节点的样式，可以是任何有效的样式；
quality ： 图片的质量，也就是清晰度；
cacheBust ： 将时间戳加入到图片的url中，相当于添加新的图片；
imagePlaceholder ： 图片生成失败时，在图片上面的提示，相当于img标签的alt；
3）实现截图
<template>
<div class="qr-code-box" id="my-node">
<vue-qr :logoSrc="config.logo" :text="config.value" class="qr-code-pic" :correctLevel="3" :margin="0"
:dotScale="0.5"></vue-qr>
<button type="button" class="shot-btn" @click="shotPic">截图</button>
<img :src="img" v-if="img"/>
</div>
</template>
<script>
import VueQr from 'vue-qr';
import domtoimage from 'dom-to-image'
export default {
data() {
return {
config: {
value: '',
logo: require('./r-VY-hpinrya9109218.jpg')
},
img: ""
}
},
mounted() {
this.config.value = "https://www.baidu.com/";
},
methods: {
shotPic() {
let node = document.getElementById('my-node');
domtoimage.toPng(node)
.then((dataUrl) => {
this.img = dataUrl;
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
},
components: {
VueQr,
domtoimage
}
}
</script>
3.遇到的问题
移动端html2canvas实现截图时，iphone6sp截图失败，出现空白情况，到现在还没找到原因（知道的小伙伴可告知），解决思路是针对iphone6sp机型使用domtoimage进行截图。
