无法在“ HTMLCanvasElement”上执行“ toDataURL”：受污染的画布

Question

我的代码是获取在<img>标记中加载的图像的base64字符串。仅当我的图像源存储在本地时，它才起作用。但不是在线网址。我从firebase上获取了图片

html：

<ion-slide *ngFor="let img of Images" >
 <img id="preview" class="images"  [src]="img" >
</ion-slide>

打字稿：

imageTObase64 () {
 const c = document.createElement('canvas') as HTMLCanvasElement;
 const ctx = c.getContext('2d') as CanvasRenderingContext2D;
 const img = document.getElementById('preview') as HTMLImageElement;
 img.setAttribute('crossOrigin', 'anonymous');
 ctx.drawImage(img, img.naturalHeight, img.naturalWidth);
 const base64String = c.toDataURL();
 console.log(base64String);
}

我得到的错误：

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

Answer 1

我没有使用上面的方法，因为它仅适用于本地图像。我直接从Firebase下载了图像