How To Save Canvas As An Image With canvas.toDataURL()?
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
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();
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>