Downloading Canvas element to an image

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?

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.

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

This solution is better:

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"); }

Download

Your browser does not support Canvas.

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();
}

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

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';

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]));
 }

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