远程图片画canvas跨域问题处理

    base64(url) {
      return new Promise((resolve) => {
        const image = new Image();
        // 先设置图片跨域属性
        image.crossOrigin = "Anonymous";
        // 再给image赋值src属性，先后顺序不能颠倒
        image.src = url;
        image.onload = function() {
          const canvas = document.createElement("CANVAS");
          // 设置canvas宽高等于图片实际宽高
          canvas.width = image.width;
          canvas.height = image.height;
          canvas.getContext("2d").drawImage(image, 0, 0);
          // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
          const dataURL = canvas.toDataURL("image/jpeg");
          resolve(dataURL);
        };
        image.onerror = () => {
          resolve({ message: "相片处理失败" });
        };
      });
    },

 (async () => {
      let baseUrl= await this.base64(url);
      // console.log( baseUrl, 111111);
    })();

最终效果