Save canvas as jpg to desktop [duplicate]

Download attribute

There is a new download attribute in HTML5 that allow you to specify a file-name for links.

I made this for saving canvas. It has a link ("Download as image") -

<a id="downloadLnk" download="YourFileName.jpg">Download as image</a>

And the function:

function download() {
    var dt = canvas.toDataURL('image/jpeg');
    this.href = dt;
};
downloadLnk.addEventListener('click', download, false);

You can even change the file-name dynamically by setting the attribute downloadLnk.download = 'myFilename.jpg'.

Demo from the archives.

Check this if it helps, A jsfiddle implemented for same requirement. http://jsfiddle.net/5whKM/

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"/>

<script>
  var img = document.images[0];
  img.onclick = function() {
    var url = img.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    location.href = url;
  };
</script>

What you should do in this case, is to send the user window.location=canvas.toDataURL('png') to the location of the file you want them to 'download'. So your solution of opening a new windows is what you should do, and is what 'downloading' is.

For example, if you want them to save an EXE for a file, you just let them click on an anchor , and the browser handles requesting the file and downloading it. You can also do that with JavaScript, but it's a security and user-experience problem to just pop SaveAs for the users.

Also check this out: Browser/HTML Force download of image from src="data:image/jpeg;base64..."