I'm developing a Screenshot extension for Chrome, and would like to know how could I implement a 'Save as' button in Html/Javascript. Currently users only Right Click To 'Save as'. I'm new to Javascript & didn't exactly find a way how to do it online. Any ideas? Thanks!

I'm developing a Screenshot extension for Chrome, and would like to know how could I implement a 'Save as' button in Html/Javascript. Currently users only Right Click To 'Save as'. I'm new to Javascript & didn't exactly find a way how to do it online. Any ideas? Thanks!

• javascript
• html
• save-as

• 1 please post what you have tried so far. – Banana Commented Mar 7, 2015 at 14:39

2 Answers 2

You can use the HTML5 download attribute, is it what you are looking for ?

<img src="http://blog.grio./wp-content/uploads/2012/09/stackoverflow.png" alt="Stack Overflow">
<br />
<a href="http://blog.grio./wp-content/uploads/2012/09/stackoverflow.png" download>Save !</a>

You can create a download link with <a href="" download="yourFileName">Save as …</a>. The download attribute will cause the resource to be downloaded instead of viewed in the browser.

Then, if you want the link to actually refer to the resource, use something like yourAnchorNode.href = yourImageNode.src;, or if you use a <canvas> element to display the picture (you didn’t specify it in your original question, unfortunately) use toDataURL or toBlob:

yourAnchorNode.href = yourCanvasNode.toDataURL();

or

yourCanvasNode.toBlob((blob) => yourAnchorNode.href = URL.createObjectURL(blob));

Note that toBlob is an asynchronous operation.