Downloading Canvas element to an image

Question

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?

Answer 1

Solution that requires NO BUTTON:

var download = function(){   var link = document.createElement('a');   link.download = 'filename.png';   link.href = document.getElementById('canvas').toDataURL()   link.click(); } 

Useful if you have other triggers for downloading, or triggers that you can't easily reference.

Answer 2

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