Get Security Error When Saving Canvas Object Into An Image

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 ima

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

Solution 2:

Are you waiting for the image to fully load before calling canvas.drawImage?

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