2

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?

Improve this question
1

2 Answers 2

Reset to default
5

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

Improve this answer

3 Comments

It doesn't works on ie browser less than 10 version. I need a javascript solution
read eligrey articles completely it supports all modern browsers.
@kiranpalode did you got it?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.