vue使用html2canvas截图并将图片传给后台

在项目中遇到这方面的需求，参考https://blog.csdn.net/qq_37600506/article/details/105415753实现的，自己也整理下备忘。

1、首先执行npm install --save html2canvas来进行安装，如果执行过程中有error导致执行不成功，可尝试将npm和node都升级后再执行；

2、执行成功后在vue页面引用，import html2canvas from 'html2canvas'；

3、将要截图的DIV设置ID，截图时通过ID来定位；

4、编写截图方法，在需要执行截图的地方调用即可。

 getImg(){
   html2canvas(
     document.getElementById('xxx'),
     {
       backgroundColor:null,//画出来的图片有白色的边框,不要可设置背景为透明色（null）
       useCORS: true,//支持图片跨域
       scale:1,//设置放大的倍数
     }
   ).then(canvas => {
     //截图用img元素承装，显示在页面的上
     let img = new Image();
     img.src = canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
     document.getElementById('yyy').appendChild(img);
 
     //如果你需要下载截图，可以使用a标签进行下载
     let a = document.createElement('a');
     a.href = canvas.toDataURL('image/jpeg');
     a.download = 'pic';
     a.click();

     //如果需要将图传入后台
     参数 = canvas.toDataURL('image/jpeg');//参数里存储的是图片的BASE64码
   })
 }
}

更多详细内容可参照官网：http://html2canvas.hertzen.com/