javascript - How can save as image to disk from HTML5 canvas - Stack Overflow

admin管理员组

文章数量:1403364

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?

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?

• javascript
• html
• html5-canvas

Share Improve this question Follow asked Dec 31, 2012 at 11:25 KiranPalodeKiranPalode 49833 gold badges88 silver badges2323 bronze badges 1

• stackoverflow./questions/7951326/… – aug Commented Dec 31, 2012 at 11:28

Add a ment  | 

2 Answers 2

Sorted by: 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>

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

本文标签： javascriptHow can save as image to disk from HTML5 canvasStack Overflow