How can save as image to disk from HTML5 canvas

Question

I have an image which is drawn on the canvas. I have a save as html input button in my page. When i click this button it should display a save as dialog and I have to save this image on the disk in jpeg format. How can do this functionality using javascript?

Answer 1

Use the base64 URI from canvas.toDataURL as the href for a link, along with the download attribute .

It should look something like:

<a href="data:image/png;base64,iVBORw0..." download="my-image">Save Image</a>

Answer 2

use eligrey polyfill to save images to disk.

The W3C File API includes a FileSaver interface, which makes saving generated data as easy as saveAs(data, filename), though unfortunately it will eventually be removed from the spec. a JavaScript library called FileSaver.js , which implements FileSaver in all modern browsers. Now that it's possible to generate any type of file you want right in the browser, document editors can have an instant save button that doesn't rely on an online connection. When paired with the standard HTML5 canvas.toBlob() method, FileSaver.js lets you save canvases instantly and give them filenames, which is very useful for HTML5 image editing webapps.

For browsers that don't yet support canvas.toBlob(), use canvas-toBlob.js.

article

DEMO