在线图片转base64，出现跨域问题解决方案

一定要仔细看完全文，或许可以帮到你。

功能需求：需要将在线图片进行转存。

遇到问题：在线图片有跨域问题，报如下错误

Access to image at ‘URL’ from origin ‘http://127.0.0.1’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

接下来就解决这个问题

百度搜到的结果都是： 1、将img绘制成canvas，再将canvas转换成base64的img流；

// 吧src转换成base64
  getBase64(img_url: any) {
          
   
    function toBase64(image) {
          
   
      const canvas = document.createElement(canvas);
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext(2d);
      ctx.drawImage(image, 0, 0, image.width, image.height);
      const base64 = canvas.toDataURL(image/png);
      return base64;
    }

    return new Promise((resolve, reject) => {
          
   
      const image = new Image();
      image.setAttribute(crossOrigin, anonymous); // 解决跨域
      image.crossOrigin = *;  // 解决跨域
      image.src = img_url;
      image.onload = () => {
          
   
        resolve(toBase64(image));
      };
    });
  }

这样写只有部分图片可以

重点来了！！！

2、图片URL缓存问题解决

贴结论

// 图片链接地址后增加随机数防止缓存
image.src = img_url + ?v= + Math.random();

增加随机数 ‘?v=’ + Math.random();

增加随机数 ‘?v=’ + Math.random();

增加随机数 ‘?v=’ + Math.random();

最后修改好的代码如下：

// 吧src转换成base64
  getBase64(img_url: any) {
          
   
    function toBase64(image) {
          
   
      const canvas = document.createElement(canvas);
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext(2d);
      ctx.drawImage(image, 0, 0, image.width, image.height);
      const base64 = canvas.toDataURL(image/png);
      return base64;
    }

    return new Promise((resolve, reject) => {
          
   
      const image = new Image();
      image.setAttribute(crossOrigin, anonymous); // 解决跨域
      image.crossOrigin = *;
      image.src = img_url + ?v= + Math.random();  // 解决图片URL缓存问题
      image.onload = () => {
          
   
        resolve(toBase64(image));
      };
    });
  }

参考：https://my.oschina.net/u/4378879/blog/4273681