Search code examples
javascripthtml5-canvas

Tainted canvases may not be exported

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?

Solution

  • 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 or GitHub). 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).