how can i achieve the following with a button tag:
<a id="download" href="a.jpg" download="a.jpg">Download</a>
P.S: when you click on the button, it should download the a.jpg file and NOT open it in the browser.
You want Content-Disposition: attachment; in the backend. You'll need a script handing out the images to force a download.
Solution for modern browsers
With image link
<a href="a.jpg" download="imageName"><img src="images/a.jpg" alt="Image"/></a>
With text link
<a href="a.jpg" download="imageName">Download Image</a>
You can add the attribute download, which is new to HTML5 and is supported by Firefox and Chrome but not yet IE or Opera:
<a id="download" href="a.jpg" download="a.jpg">Download</a>
<a href="test.png" download ><input type="button" id="btn1" onclick="saveAsImg(document.getElementById('chart_div'));" title="Download Png" /></a>
find parent of id="btn1"
like $("#btn1").parent().get(0).href=$("img1").src;