0

I have made a canvas and added different objects to it such as images, clipart and text. When I take snap of the canvas when it contains only text, using the method canvas.toDataURL(), it gives me the correct snap. But when I add an image to the canvas, it will return a blank page.

My code is as follows:

canInstance.discardActiveObject();

drawCanvas.loadFromJSON(json,function(){
    var img = drawCanvas.toDataURL("png");
    $("#previewPopUp").append("<img src='"+ img +"'/>");
});

I am using fabricjs. Can anybody tell how to take a snap of a canvas when it contains a image?

Octahedron
  • 893
  • 2
  • 16
  • 31
Shaun
  • 5
  • 4
  • possible duplicate of [Canvas tainted by cross-origin data](http://stackoverflow.com/questions/13674835/canvas-tainted-by-cross-origin-data) – Philipp Feb 07 '14 at 08:36

1 Answers1

1

The likeliest reason why it doesn't work is because you are loading the image from a different domain than where your HTML is hosted. As soon as you do that, the canvas gets "tainted by cross-origin data" and certain functions which allow to read the canvas content become unavailable.

This is a security feature to prevent web developers from accessing images only the user is allowed to access.

As a workaround, copy the image to the same domain or, when you control the domain the image is loaded from, whitelist the domain with your HTML by enabling Cross-Origin Resource Sharing in the settings of the webserver.

Philipp
  • 67,764
  • 9
  • 118
  • 153
  • @Shaun not when you have cross-origin data on the canvas (and when there is, it's a security vulnerability which should be fixed by the developers of the web browser) – Philipp Feb 07 '14 at 09:37