What is the easiest way to download a canvas element as a png?

Question

Something like the following:

 <canvas id="canv" width="500" height="500"> </canvas>
    <input type="submit" value="Download Canvas" onclick="download();"/>


    function download () {
     var canvas = document.getElementById("canv");
     var dataURL = toDataURL(canvas);

    //Download code here: 

    }

What is the required code to initiate a download of the image?

`type=submit` usually means upload to server--not download...are your trying to upload to server or let client save to their local drive? — markE, Apr 19 '14 at 15:38
You can use FileSaver.js. See http://stackoverflow.com/a/36987094/2183503 for more information — kotpal, Jun 03 '16 at 21:55

score 0 · Answer 1 · answered Apr 20 '14 at 15:46

The most browser compatible way is to create a client-side image of your canvas and display it in a new browser tab.

Then the user can "right-click-save-as" the image and specify where on the local drive they want the image to be downloaded.

var html="<p>Right-click on image below and Save-Picture-As</p>";

html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";

var tab=window.open();

tab.document.write(html);

There's a new saveAs method that the w3c has introduced which saves blob data to a local drive.

However it is not universally implemented in browsers.

Eli Grey has coded a shim that works well: https://github.com/eligrey/FileSaver.js/

What is the easiest way to download a canvas element as a png?

1 Answers1