Bootstrap

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的时候,完美解决图片空白或图片跨域,有疑问欢迎评论交流

;