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

【问题标题】：Get security error when saving canvas object into an image将画布对象保存到图像时出现安全错误
【发布时间】：2011-11-15 10:56:24
【问题描述】：

嗯，不完全是。如果我只是绘制（例如线条，矩形......）并尝试将画布导出为图像。它工作正常。但是，如果我使用在画布上放置图像的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 会从图像中获取原始像素并将其粘贴到画布上，但我想我错了。我能做什么？

【问题讨论】：

你能给出导致问题的部分代码吗？
图片从何而来？如果您将.drawImage 与跨域图像一起使用，那么您将无法使用.getImageData 或.toDataURL。
是的，我认为这就是问题所在，跨域图像。有什么办法吗？

标签： javascript security html canvas

【解决方案1】：

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

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

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

[...]

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

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

【讨论】：

如何使用某种外部库来读取图像的像素，然后将每个像素放到画布上。你知道这样的图书馆吗？
@user814628 “外部库”是什么意思？比如闪存？在我看来，您正在尝试做一些邪恶的事情（对用户不利，可能是非法的）。为什么要尝试在浏览器上从另一个域加载图像然后捕获它？
对不起，我不是故意的。我只是在做一个高级设计项目。通过外部库，我的意思是可能使用外部 javascript 库。也许从用户那里获取图像链接并从图像中读取像素并将其存储到画布上。只是看看这是否有可能。
@user814628 不，将原始图像像素暴露给 JavaScript 的唯一非插件 Web 浏览器技术是 HTML5 画布，并且（根据我上面链接的 URL）您可能不会调用 getImageData()被污染的画布。
嗯...那么是否可以只获取当前画布中的像素，将其保存到临时画布中，然后将临时画布另存为图像？编辑：哦等等，我也不能使用 getImageData 嗯...废话

【解决方案2】：

在调用canvas.drawImage之前，您是否正在等待图像完全加载？

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

【讨论】：

是的，正如 cmets 中提到的，我认为问题在于跨域图像。我该如何规避这个问题？