How To Save Canvas As An Image With canvas.toDataURL()?
Solution 1:
Here is some code. without any error.
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
window.location.href=image; // it will save locally
Solution 2:
This solution allows you to change the name of the downloaded file:
HTML:
<a id="link"></a>
JAVASCRIPT:
var link = document.getElementById('link');
link.setAttribute('download', 'MintyPaper.png');
link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
link.click();
Solution 3:
You can use canvas2image to prompt for download.
I had the same issue, here's a simple example that both adds the image to the page and forces the browser to download it:
<html>
<head>
<script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
<script>
function draw(){
var canvas = document.getElementById("thecanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
ctx.fillRect(25,25,100,100);
ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
ctx.fillRect(58, 74, 125, 100);
}
function to_image(){
var canvas = document.getElementById("thecanvas");
document.getElementById("theimage").src = canvas.toDataURL();
Canvas2Image.saveAsPNG(canvas);
}
</script>
</head>
<body onload="draw()">
<canvas width=200 height=200 id="thecanvas"></canvas>
<div><button onclick="to_image()">Draw to Image</button></div>
<image id="theimage"></image>
</body>
</html>
Solution 4:
You can try this; create a dummy HTML anchor, and download the image from there like...
// Convert canvas to image
document.getElementById('btn-download').addEventListener("click", function(e) {
var canvas = document.querySelector('#my-canvas');
var dataURL = canvas.toDataURL("image/jpeg", 1.0);
downloadImage(dataURL, 'my-canvas.jpeg');
});
// Save | Download image
function downloadImage(data, filename = 'untitled.jpeg') {
var a = document.createElement('a');
a.href = data;
a.download = filename;
document.body.appendChild(a);
a.click();
}
Solution 5:
I created a small library that does this (along with some other handy conversions). It's called reimg, and it's really simple to use.
ReImg.fromCanvas(yourCanvasElement).toPng()