Downloading Canvas element to an image

小开

最佳答案

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

小开

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

小开

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>

小开

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.

小开

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

小开

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

Capture node screenshot