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

Get security error when saving canvas object into an image

本文关键字：图像 错误 安全 保存 布对象 对象      更新时间：2023-09-26

不完全是。如果我只是绘制(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会从图像中获取原始像素并将其粘贴到画布上，但我想我错了。我能做什么?

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

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

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

[…]

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

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

在调用canvas.drawImage之前是否等待图像完全加载?

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