Download an image from a page using download button

Question

I have an image on a page and a download button. I would like to click on that download button and the image needs to be downloaded (* It can be in any Format).

Here is my code below for the Image and the download button

<Style>
.results img {
position: absolute;
top: 33%; 
left: 25.5%;
width: 50%;
height: auto;

.button img{
position: absolute;
left: 50%;
top: 94.5%;
</style>

<div class="results">
<img src="Images\pic.png">
</div>

<div class="Button">
<input id="test1" name="test1" type="image" src="images/download.png" value="myValue" alt="" onClick=""></div>

Can anyone suggest me a JavaScript solution to achieve this.

http://jsfiddle.net/MW9E4/1/ from http://stackoverflow.com/questions/23749738/jquery-or-html-to-download-image-onclick-or-with-link — Sandeep Nayak, Oct 08 '15 at 09:23

score 1 · Accepted Answer · answered Oct 08 '15 at 09:24

#image{
 
    float:left;
}
#dwnld{
    float:left;
}

.button {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 2px 8px;
    font-size: 15px;
}

<div id="download">
    <img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="image" />
    <a class="button" href="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" download="google.png">Download image</a>
</div>

Download an image from a page using download button

1 Answers1