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?

Ulf Aslak · Answer 1 · 2019-11-21T09:57:14.967

106

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.

edited Nov 21 '19 at 09:57

answered May 11 '18 at 22:09

Ulf Aslak

7,876
4
34
56

@TAHASULTANTEMURI can you be more specific? And in case you found a fix, share it. – Ulf Aslak Jan 21 '20 at 11:01
1

check the answer , actually toDataURL is not longer effective due to security reason but if you are downloading the image from canvas that was imported from img tag then this tag should have crossorigin attribute to make it work see https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror – TAHA SULTAN TEMURI Jan 21 '20 at 11:21
@TAHASULTANTEMURI thanks! can you check if implementing the suggested answer (img.setAttribute('crossOrigin', 'anonymous'); img.src = url) works? – Ulf Aslak Jan 22 '20 at 11:40

score 60 · Accepted Answer · answered Nov 14 '11 at 19:21

60

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

answered Nov 14 '11 at 19:21

frank_neff

952
8
16

1

When I do document.write, wouldn't it just write onto the webpage? Or would that issue a download command? – dchhetri Nov 14 '11 at 21:01
Yes it just writes the image onto the page. You can force downloading, but in that case, you'll need a server-side implementation [explained here](http://stackoverflow.com/questions/5648967/force-download-image), or google "force image download" – frank_neff Nov 14 '11 at 21:18
4

to download the image you can place it in an `````` tag using ```download``` attribute (html5) : ```Download as jpeg``` – svassr Dec 10 '13 at 07:52

score 32 · Answer 3 · edited Aug 30 '22 at 16:24

32

function download() {
var download = document.getElementById("download");
var image = document.getElementById("myCanvas").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}

<a id="download" download="triangle.png">
<button type="button" onClick="download()">Download</button>
</a>
    
<canvas id="myCanvas" width="720" height="450">Your browser does not support Canvas.</canvas>

edited Aug 30 '22 at 16:24

Andy

61,948
13
68
95

answered Mar 02 '17 at 03:22

Humberto

428
5
7

56

Can you explain why this is better? – BBaysinger Apr 12 '18 at 22:48
1

Yeah, why? Sorry, I can't edit it! The queue is full – Tiago Rangel Sep 13 '21 at 16:00

score 19 · Answer 4 · edited Jun 07 '21 at 05:49

19

Try something like this...

function downloadCanvasAsImage(){

    let canvasImage = document.getElementById('canvas').toDataURL('image/png');
    
    // this can be used to download any image from webpage to local disk
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        let a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'image_name.png';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove();
      };
      xhr.open('GET', canvasImage); // This is to download the canvas Image
      xhr.send();
}

edited Jun 07 '21 at 05:49

Luis Lobo

489
4
7

answered May 17 '19 at 11:55

ifelse.codes

2,289
23
21

What if we want to convert it in SVG? Please guide. – Ahsan Khurshid Sep 16 '21 at 08:00
1

Canvas is a raster format. SVG is a vector format. You can't just convert between them – Zach Saucier Jan 06 '23 at 15:48

score 9 · Answer 5 · answered Sep 05 '14 at 07:40

var c = document.getElementById("popup");
var link = document.getElementById('cropImageLink');
link.setAttribute('download', 'MintyPaper.png');
link.setAttribute('href', c.toDataURL("image/png").replace("image/png", "image/octet-stream"));
link.click();

I hope these code would be work. But first create Anchor tag in canvas tag whose id is 'cropImageLink'. than after check. but it's not working in IE browser

score 4 · Answer 6 · edited Jun 07 '21 at 00:41

You can use the reimg library to do this really easily.

Converting the canvas to an img : ReImg.fromCanvas(document.getElementById('yourCanvas')).toPng()

And downloading this image for the user can be done like this : ReImg.fromCanvas(document.getElementById('canvas')).downloadPng()

About giving the file a custom name, if you look into the code of the library (which is very short and simple to understand) you'll find that you can change the name.

Here is a link to the specific line: https://github.com/gillyb/reimg/blob/master/reimg.js#L63 filename = filename || 'image.png';

score 0 · Answer 7 · answered Jan 21 '20 at 11:19

relate to this and thanks to @kaiido

I just modified the callback method and it worked ,the callback method mentioned there was not working for me

var callback = function(blob) {
var a = document.createElement('a');
var saveAs = $('input[name="group1"]:checked').val();


var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'Image.' + saveAs;
document.body.appendChild(link);
link.click();

};
 function dataURIToBlob(dataURI, callback) {
var binStr = atob(dataURI.split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);

 for (var i = 0; i < len; i++) {
  arr[i] = binStr.charCodeAt(i);
 }

   callback(new Blob([arr]));
 }

score 0 · Answer 8 · answered May 24 '22 at 08:18

0

Chromium DevTools > Inspect canvas tag > 'Capture node screenshot' and the image has already been downloaded

Capture node screenshot

answered May 24 '22 at 08:18

gurkan

884
4
16
25

This creates a screenshot, doesn't download the canvas element – Rouzbeh May 12 '23 at 22:01

Downloading Canvas element to an image

8 Answers8

Linked

Related