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 -- 清晰度