html2canvas官网： https://html2canvas.hertzen.com/
使用的版本是最新版本：^1.0.0-alpha.12
html2canvas 可以将一个元素渲染为canvas。需要注意的是，Vue使用v-if和v-show的时候html2canvas无法将元素渲染为canvas。在我的项目之中存在一个骨架屏，这里我的解决方案是对要渲染的网页采用position:absolute为其增加一个蒙层。
生成canvas之后可以采用canvas.toDataURL("image/png")将canvas转化为base64。
关于清晰度问题：在Android手机上，生成的图片会存在模糊。图片的清晰度取决于生成的canvas的清晰度，在html2canvas之中存在一个参数scale，这里设置生成canvas的大小设置为图片大小的两倍保障清晰度。
最后，如果网页之中存在较大的图片，可能导致html2canvas生成canvas的时候图片还没有加载完，从而致使排版错乱。可以判断一下图片是否加载完。
1.引入html2canvas2.
html2canvas(document.body, {
onrendered: function(canvas){
document.body.appendChild(canvas)
},
width:300,
height:200
})
然后就在document.body中append了一个canvas.
3.如果想要实现生成一个图片，可以这样实现：
html2canvas(document.body, {
onrendered: function(canvas){
//document.body.appendChild(canvas)
var img = canvas.toDataURL()
console.log(img)//在console中会输出图片的路径，然后复制在浏览器一粘贴，就可以看到。
},
width:300,
height:200
})
html2canvas： 将dom元素转为一张图片
1，装包： npm install --save html2canvas
2，导入： import html2canvas from 'html2canvas'
3，如果该盒子里面有从后台请求回来的图片路径 可能会存在图片跨域情况
img标签里加上 crossorigin='anonymous'
html2canvas方法里 加上useCORS: true,
如果再不行 就在图片路径后面加个时间戳 ：url+'?time='+new Date().valueOf()
```
toImage() {
window.pageYOffset = 0
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
html2canvas(this.$refs.qrcode,{
useCORS:true,
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
x: document.getElementById('qrcode').offsetLeft,
y: document.getElementById('qrcode').offsetTop,
scale: 2,
}).then(canvas =>{
let dataURL = canvas.toDataURL("image/png")
this.imgUrl = dataURL
if(this.imgUrl) {
this.show =true
this.loading.close()
}
}).catch(err =>{
this.loading.close()
})
},
```
4， html2canvas(要转成图片的元素，对象-最终图片的属性)
useCORS： 表示允许跨域
windowWidth,windowHeight,x,y, 是解决最终图片顶部或底部的空白区域
5， scale -- 清晰度
