How to save an image with JavaScript?

I'm working on a Chrome Extension: when you drag an image, it will be saved to your computer.

I learned that in HTML5 there is FileWriter API, but really can't find any example of it, and does Chro开发者_StackOverflow社区me support it?

No, there isn't a FileWriter API in HTML5. What you probably mean is the File API that allows you to read files. And in Chrome even extensions aren't allowed to write files, for reasons of security. So unless you want to bundle an NPAPI plugin with your extension (which would trigger a huge warning upon installation) all you can do is trigger a download message that the user might choose to accept - or not. See Cross-browser Save As .txt for a possible approach (Flash objects like Downloadify being the other).

Edit: I was wrong, there is a FileWriter API proposal. It is very far from being done however.

I found this. http://www.html5rocks.com/en/tutorials/file/filesystem/ You can find some examples.

Edit This is screenshot from the article. I'm using chrome 12.0

FileWriter API browser support message http://s3.amazonaws.com/twitpic/photos/full/329503613.png?AWSAccessKeyId=AKIAJF3XCCKACR3QDMOA&Expires=1308932374&Signature=DXBdFSjbNqaeJPr%2F0fSAqPWyh2E%3D

I don't think the FileWriter API will be ready and usable for some time yet.

You could get the image data in hex, then use a DataURI to 'export' it from the browser. Although this leads to a file saved with a filename such as "download(1)". Each browser seems to have different size limitations for DataURIs, and they're not big, although ahould be fine for a reasonably sized image.

http://en.wikipedia.org/wiki/Data_URI_scheme

Alternatively you could use a Downloadify to save it with a proper filename (Requires flash and may be tricky to embed into the chrome extension).

http://davidwalsh.name/downloadify