在vue中利用html2canvas截取div并保存为png图片

1.template中的代码

按钮触发保存图片（这里使用的是element ui）


    你需要截取的内容（要保证这个内容是在页面上可见  否则截取会是空白）

2.methods中的方法

//注意要在script标签前面引入html2canvas  
import html2canvas from 'html2canvas';

      //下面是methods中的内容
      //图片转换格式的方法 直接使用就好  不需要知道为什么
       dataURLToBlob(dataurl) {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        /*保存图片的方法（即按钮点击触发的方法）   
          第一个参数为需要保存的div的id名  
          第二个参数为保存图片的名称 */
        saveImage(divText, imgText) {
            let canvasID = this.$refs[divText];
            let that = this;
            let a = document.createElement('a');
            html2canvas(canvasID).then(canvas => {
                let dom = document.body.appendChild(canvas);
                dom.style.display = 'none';
                a.style.display = 'none';
                document.body.removeChild(dom);
                let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
                a.setAttribute('href', URL.createObjectURL(blob));
                //这块是保存图片操作  可以设置保存的图片的信息
                a.setAttribute('download', imgText + '.png');
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(blob);
                document.body.removeChild(a);
            });
        },

3.问题：

有网友反馈了截图的内容是空的，这边解释一下，html2canvas截图会把所截图的图片内容base64化，如果这个图片不是本地图片会导致跨域报错，最终导致截图出来的图片是空的，这里我们只需要给图片上增加一个属性crossOrigin="Anonymous"，以及对应后台做跨域处理就行了。