Search code examples
javascriptcanvasdownload

Downloading Canvas element to an image

What are the different ways to save a canvas object?

In my research, I've found two approaches:

var data = canvas.toDataURL();
var prev = window.location.href;
window.location.href = data.replace("image/png", "image/octet-stream");
window.location.href = prev;

Another way is to take a snapshot.

Are there other ways to do this?

Is it possible to customize the download filename?

Solution

  • The one way to save is exporting as an image... You already found this solution, and it's the best one i think ;)

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

    You can use different image types. Change the mimetype in this function:

        canvas.toDataURL("image/jpeg");

    An other way to save canvas data (into a PDF) is using the wkhtmltopdf Library

    Cheers. Frank

    frankneff.ch / @frankneff