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

最新推荐文章于 2025-03-27 13:29:02 发布

邱铁牛

最新推荐文章于 2025-03-27 13:29:02 发布

阅读量3.2k

点赞数

分类专栏：前端记录文章标签： html2canvas 图片空白图片跨域 vue

本文链接：https://blog.youkuaiyun.com/qiuqiang748/article/details/115322908

版权

前端记录专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在前端将网络图片转换为64位格式，无需涉及阿里云服务器跨域配置。通过在canvas上绘制图片并利用toDataURL方法，可以实现图片转换。同时，这种方法还能解决图片跨域问题，确保在html2canvas等库中正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决思路：前端将网络图片转换成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的时候，完美解决图片空白或图片跨域，有疑问欢迎评论交流