user3465096 user3465096 -4 years ago 672
Javascript Question

Tainted canvases may not be exported

Firstly I would like to apologise becouse i saw similar threads, but I didin't find it clear what should I do. I want to save my canvas to a img. I have this function:

function save() {
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
}


It gives me error:


Uncaught SecurityError: Failed to execute 'toDataURL' on
'HTMLCanvasElement': Tainted canvases may not be exported.


What should I do?

Answer Source

For security reasons, your local drive is declared to be "other-domain" and will taint the canvas.

(That's because your most sensitive info is likely on your local drive!).

While testing try these workarounds:

  • Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders).

  • Post your images to a site that supports cross-domain sharing (like dropbox.com). Be sure you put your images in dropbox's public folder and also set the cross origin flag when downloading the image (var img=new Image(); img.crossOrigin="anonymous" ...)

  • Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download