Angular Native Element 中受污染的画布问题答案

【问题标题】：Problem with Tainted canvases in Angular Native ElementAngular Native Element 中受污染的画布问题
【发布时间】：2021-04-12 10:36:51
【问题描述】：

我最近一直在试验 CANVAS，（所以我是新手），现在我在一个应用程序中工作画布上的图像，然后存储结果。

我的问题是，当我尝试通过在来自与我的应用不同的域的图像上绘图来编辑画布时，我得到错误。

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

当我尝试运行它时

this.ctx.canvas.toDataURL()

我在 Angular 9 中使用打字稿

我这样做的目的是将 canvas 转换为图像以存储它。

我在互联网上看到了一些结果，可以通过这种方式解决 source

html2canvas (document.body, {
    allowTaint: true,
    foreignObjectRendering: true
});

但由于我将 native element 与 angular 一起使用，我不知道这个实现的“等效”是什么。

@ViewChild('previewHeroMaker', {static: true}) heroMakerPreviewCanvas: ElementRef<HTMLCanvasElement>;

this.ctx = this.heroMakerPreviewCanvas.nativeElement.getContext('2d');

所以我理解我必须找到一种方法来使用我当前的code 将allowTaint 属性添加到我的画布中，如果有人有任何意见可以阐明这一点，它会很棒。

【问题讨论】：

标签： typescript canvas cors angular9

【解决方案1】：

对于遇到此问题的任何人，我注意到受污染的画布的问题在于，当您尝试使用相同的域图像或资源时，本地驱动器会生成此错误以确保安全。无论如何，我正在使用图像，所以只需将 property crossOrigin 添加到图像并完美运行。

      const baseImage = new Image();
      baseImage.src = imageUrl;
      baseImage.crossOrigin = 'Anonymous';

您可以在此处查看更多信息docs

【讨论】：