将画布对象保存到图像时出现安全错误 [英] Get security error when saving canvas object into an image

问题描述

不完全是。如果我只是绘制（行，rect ...），并尝试导出画布作为图像。它工作正常。如果我使用 canvas.drawImage（...）函数将图像放在画布上。然后尝试将其导出为图像，我得到以下安全错误：

Well not exactly. If I just draw (ex lines,rect...) and try to export the canvas as an image. It works fine. If I however use the canvas.drawImage(...) function which places an image on the canvas. Then try to export it as an image, I get the following security error:

[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 将从图像中获取原始像素并将其粘贴到画布上，但我猜我错了。我可以做什么？

I was assuming that the canvas.drawImage would take the raw pixel from the image and paste it onto the canvas, but I guess I was wrong. What can I do?

推荐答案

您描述的行为是规范。摘录：

The behavior you describe is per the specification. Excerpted:

所有 canvas 元素必须以其原始清单设置为true。如果发生以下任何操作，则标志必须设置为false：

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:

• 元素的2D上下文 drawImage 或 HTMLVideoElement 调用方法拥有画布元素的文档对象。

• 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.

[...]

每当 toDataURL（） canvas 元素，其 origin-clean 标志设置为false，则该方法必须抛出 SecurityError exception。

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.

避免这种情况的唯一方法是使用服务器端技术来获取远程映像请从您的同一个域重新投放。

The only way to circumvent this is to use a server-side technology to fetch the remote image for you and re-serve it from your same domain.

这篇关于将画布对象保存到图像时出现安全错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！