Save canvas as jpg to desktop

Question

I am trying to save an image (JPEG) to the desktop from an HTML5canvas. I can open in a new window window.open(canvas.toDataURL('png'), "");, but how can I save it to the desktop? Thanks.

As far as I am aware, you can't choose where to save such a file, though have you made no attempts at this problem? If you have, please post them. — Daedalus, Jul 01 '13 at 04:12
Check this out: http://stackoverflow.com/questions/12796513/html5-canvas-to-png-file/12796748#12796748 — Nippey, Jul 01 '13 at 11:41

score 55 · Accepted Answer · edited Jun 20 '20 at 09:12

55

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 01 '13 at 06:40

how can i use this on button event? – Rajkamal Jul 01 '13 at 10:13
@Rajkamal as I demonstrate in the example (`addEventListener`). When a button is clicked the event handler calls the download function. `this` will be the link itself. The function modifies the href to the data url and since the download *attribute* is specified the browser will allow you to download it instead of showing it (shows a file requester of where you want to save it). – Jul 01 '13 at 10:19
@Rajkamal Demo added to the answer – Jul 01 '13 at 10:44
I am new for html5 sorry to asking this u r just giving download link. How can i give this to button – Rajkamal Jul 01 '13 at 11:24
2

Thanks for ur help finaly i find out – Rajkamal Jul 01 '13 at 11:28
@Rajkamal ah! ok, don't use an `input` button. That won't work as you can't set `href` on an input as it isn't available for `input`s. You need to use an `A`-tag as the first code line in my answer. You need to replace the `input` button you have with an `a` link and set the download attribute as shown. – Jul 01 '13 at 11:29
@Rajkamal you almost got it correct. Just remove the input tag all together. You can set plain text in the a tag instead and use css to style the a link so it looks like the input button. – Jul 01 '13 at 11:31
it working now – Rajkamal Jul 01 '13 at 11:33
6

That picture in your fiddle appears to contain all the colours of a good quality migraine!! – MyDaftQuestions Jul 14 '15 at 08:48
nice but doesnt work in IE 11 – techie_28 Jul 22 '16 at 07:26
[Fiddle link](http://jsfiddle.net/epistemex/kyjs655r/) is broken – ggorlen May 19 '23 at 22:32

score 8 · Answer 2 · answered Jul 01 '13 at 05:10

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>

jsfiddle link says not found :( – Roman Gaufman Jan 11 '18 at 00:28 — Roman Gaufman, Jan 11 '18 at 00:28

score 1 · Answer 3 · edited May 23 '17 at 11:54

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..."

this approach is blocked by CORS policy – Nir O. Jun 16 '21 at 09:40 — Nir O., Jun 16 '21 at 09:40

Save canvas as jpg to desktop

3 Answers3

Download attribute

Linked