Converting canvas which makes use of drawimage method to png

Question

I have two buttons, one button creates a canvas with an image. The other buttons converts the canvas to png data (At least, thats what I want to achieve).

The problem is that JavaScript somehow doesn't convert the canvas to image data.

Check jsfiddle here: http://jsfiddle.net/julekker/tjYzw/1/

I've tried to use window.location = finalcanvas.toDataURL("image/png"); and

var img = finalcanvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

But they both didn't work.

How can you convert an canvas image which makes use of the drawImage method to png data?

In the jsfiddle code, you seem to draw an external image to the canvas. That will prevent getting access to the pixel data and toDataURL if it is a cross-domain access for security reasons. — Stefan Haustein, Apr 28 '13 at 12:56
No, just a little tricky: http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation — Stefan Haustein, Apr 28 '13 at 13:36

score 1 · Accepted Answer · edited May 23 '17 at 12:12

In the jsfiddle code, you seem to draw an external image to the canvas. That will prevent getting access to the pixel data and toDataURL if it is a cross-domain access for security reasons.

This issue has been covered here many times; see Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation for a discussion about using CORS to address this problem and browser support. Another option may be loading the images via a local proxy.

Converting canvas which makes use of drawimage method to png

1 Answers1