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

您描述的行为是the specification。摘录：

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


使用drawImage()或HTMLImageElement调用元素的2D上下文HTMLVideoElement方法，其来源与{{1}的来源不同拥有Document元素的对象。


[...]

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

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

Answer 2

您是否在等待图片完全加载后再致电canvas.drawImage？

var img = new Image();
img.onload = function(){
    canvas.drawImage(img,0,0);
    //do whatever else here
};
img.src = 'foo.jpg';

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

2 个答案: