Question

我正在构建一个Ionic应用程序，尝试将URL中的图像转换为base64时出现此错误。

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我的代码如下：

public getBase64Image(imgUrl: string): Promise<string> {
    if (!imgUrl.includes("http")) {
      return;
    }

    return new Promise<string>(resolve => {
      let img = new Image();

      img.src = imgUrl;
      img.crossOrigin = "anonymous"
      img.onload = (() => {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        let dataURL = canvas.toDataURL("image/png");
        resolve(dataURL);
      });
    });
  }

我还读过其他问题，其中在anonymous中设置crossOrigin是解决方案，但我已经有了。

希望您能帮助我，谢谢。

编辑1

请注意，我不是第一次将图像转换为base64时得到此信息，但是在接下来的几次尝试编辑图像时得到了它。

Answer 1

我已改为使用Angular的HttpClient下载图像，然后获取其base64，而不是第一篇文章中的方法。

代码：

public getBase64Image(imgUrl: string): Observable<string> {
    return new Observable(observer => {
      this.http.get(imgUrl, { responseType: 'blob' }).subscribe(data => {
        var reader = new FileReader();
        reader.readAsDataURL(data);
        reader.onloadend = () => {
          observer.next(reader.result.toString().replace(":application/octet-stream;", ":image/png;"));
          observer.complete();
        }
      });
    });
  }

打字稿-未捕获的DOMException：无法在“ HTMLCanvasElement”上执行“ toDataURL”：可能无法导出污染的画布

1 个答案: