How to Create a Save as button for an image

Question

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!

Answer 1

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

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

Answer 2

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.