将画布对象保存到图像时出现安全性错误

Question

不完全是.如果我只绘制(ex lines,rect ...)并尝试将画布导出为图像.它工作正常.但是,如果我使用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将从图像中取出原始像素并将其粘贴到画布上,但我想我错了.我能做什么？

Answer 1

您描述的行为符合规范.摘录:

所有canvas元素必须以origin-clean设置为true 开头.如果发生以下任何操作,则必须将该标志设置为false:

• 元素的2D上下文的drawImage()方法使用a HTMLImageElement或an 来调用,HTMLVideoElement其原点与Document拥有该canvas元素的对象的原点不同.

[...]

每当调用origin-clean标志设置为false toDataURL()的canvas元素的方法时,该方法必须抛出异常.SecurityError

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