javascript - 将 Canvas 对象保存到图像中时出现安全错误

Question

嗯，不完全是。如果我只是绘制(ex lines,rect...)并尝试将 Canvas 导出为图像。它工作正常。但是，如果我使用将图像放置在 Canvas 上的 canvas.drawImage(...) 函数。然后尝试将其导出为图像，我收到以下安全错误:

[16:05:05.326] uncaught exception: [Exception... "Security error"  code: "1000" nsresult: 
"0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"  location: 
"http://127.0.0.1:8020/Blackboard/Models/BlackboardCanvas.js Line: 82"]

我假设 canvas.drawImage 会从图像中获取原始像素并将其粘贴到 Canvas 上，但我想我错了。我能做什么？

Answer 1

您描述的行为符合 the specification .摘录:

All canvas elements must start with their origin-clean set to true. The flag must be set to false if any of the following actions occur:

• The element's 2D context's drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same as that of the Document object that owns the canvas element.

[...]

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must throw a SecurityError exception.

避免这种情况的唯一方法是使用服务器端技术为您获取远程图像并从您的同一域重新提供它。