英文:
Error: 'HTMLCanvasElement': Tainted canvases may not be exported
问题
'HTMLCanvasElement'：受损画布无法导出。我尝试使用StackOverflow上建议的crossorigin修复此问题，但没有成功。这是我的代码：https://stackblitz.com/edit/angular-pggk9r?file=src%2Fmain.ts。如果只单击“download”，一切都正常工作。但如果单击“change”以更改画布的背景，然后单击“download”，就会出现错误。在查看StackOverflow和GitHub上的答案后，我尝试使用crossOrigin: 'anonymous'，但它没有起作用。我的浏览器是Chrome。
英文:
I added image to my canvas. After doing this when I try to export the whole canvas to PNG file, this error occures: 'HTMLCanvasElement': Tainted canvases may not be exported.
I tried fix this with crossorigin as suggested on stackoverflow but it didn't work.
Here is my code: https://stackblitz.com/edit/angular-pggk9r?file=src%2Fmain.ts
If you just click "download", everything works fine. But if you click "change" to change the background of the canvas, and then "download", the error happens.
After reviewing answers on stackoverflow and github, I tried to use crossOrigin: 'anonymous' but it didn't work.
My browser is Chrome.
答案1
得分: 0
以下是翻译好的部分：
这是对我有效的方法（答案受到 https://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception 上另一个答案的启发）：
let c = document.createElement('img');
let i = new fabric.Image(this.c);
c.onload = () => {
i = new fabric.Image(this.c);
this.canvas.add(i);
c = c.onload = null;
};
c.setAttribute('crossOrigin', 'anonymous');
c.src = "<任意外部链接>";
英文:
This is what worked for me (the answer is inspired by another answer from https://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception):
let c = document.createElement('img');
let i = new fabric.Image(this.c);
c.onload = () => {
i = new fabric.Image(this.c);
this.canvas.add(i);
c = c.onload = null;
};
c.setAttribute('crossOrigin', 'anonymous');
c.src = "<any external url>";
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论