html2canvas解决图片空白，网络图片跨域

解决思路：前端将网络图片转换成64位格式 

不需要设置什么阿里云服务器跨域，nginx配置header等等

1、准备一个canvas标签用于转换64位格式图片

<canvas ref="headCanvas" style="position: absolute;height: 0; width: 0;opacity: 0;"></canvas>

2、关键方法

注意：一点要给网络图片手动添加在后面拼接时间戳，否则canvas.toDataURL方法会报错

//将网络图片转化为Base64
      ImageToBase64() {
        let vm = this
        //一定要设置为let，不然图片不显示，下面解释↓
        let image = new Image();

        //解决跨域问题
        image.setAttribute('crossOrigin', 'anonymous');
//this.invincibleData.thumb这里是网络图片路径，
//比如：https://down.yantongtech.cn/data/upload/images/2021-03-29/8567a979ba7ab9fd94e49866f095b9e5.jpg?1617081289278
        image.src = this.invincibleData.thumb;

        //image.onload为异步加载
        image.onload = () => {
          var canvas = vm.$refs.headCanvas;
          var context = canvas.getContext('2d');
          canvas.width = image.width;
          canvas.height = image.height;
          context.drawImage(image, 0, 0, image.width, image.height);
          var dataurl = canvas.toDataURL("image/png");
//得到64位格式
          this.invincibleData.thumb64 = dataurl
        }
      },

3、网络图片成功转换成64位图片之后，在使用html2canvas的时候，完美解决图片空白或图片跨域，有疑问欢迎评论交流