Convert canvas to an image with JavaScript

Question

I want to convert canvas to an image with JavaScript, When I try to `canvas.toDataURL("image/png");` It gives the following error SecurityError: The operation is insecure

Accepted Answer

You have the right idea, and it will work in very simple cases such as:

```
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,50,50);

var img = new Image();
img.src = can.toDataURL();
document.body.appendChild(img);
```

JSFiddle

But it becomes problematic if you have "dirtied" your canvas. This is done by drawing images to the canvas that are from a different origin. For instance, if your canvas is hosted at www.example.com, and you use images from www.wikipedia.org, then your canvas' origin-clean flag is set to `false` internally.

Once the origin-clean flag is set to `false`, you are no longer allowed to call `toDataURL` or `getImageData`

Technically, images are of the same origin if domains, protocols, and ports match.

If you are working locally (file://) then any image drawn will set off the flag. This makes debugging annoying, but with Chrome you can start it with the flag ` --allow-file-access-from-files` to allow this.

Convert canvas to an image with JavaScript

Solution

Problem

Related problems