javascript - Get security error when saving canvas object into an image

Question

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"]

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?

Answer 1

The behavior you describe is per the specification. Excerpted:

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:

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

[...]

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.