解决跨域图片加载失败问题

问题描述：

后台返回了一个二进制图片的url,这个url跨域了，(但是使用img标签可以加载出来)
报错信息如下图：

解决方案：

使用js操作图片，通过canvas绘制后转成base64,再把base64进行绘制

主要代码如下：

//根据下载地址转换成base64图片
export function downloadIamge(imgsrc) {
  return new Promise((resolve, reject) => {
    try {
      var url = "";
      var image = new Image();
      image.src = imgsrc;
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        resolve({
          url:url,
          width:canvas.width,
          height:canvas.height
        })
      };
    } catch (e) {
      reject();
    }
  });
}
import { downloadIamge  } from "@/utils/index.js";
downloadIamge(ress.data.recordUrl).then(res=>{
//res.url即为base64图片，接着做后续的操作就可以
})

注意事项：

由于image.onload是个异步函数，所以必须等此函数执行完才会产生所需要的url,否则返回的url就是空
解决异步方法：promise