How to download an image with different sizes in jquery?

Question

I want to create buttons such that each button downloads an image in the page with different sizes . Here is my image:

<img src="src" alt="no image" id="QRImage" />

And these are my buttons :

  <a onclick="Download(1)" href="javascript:;" >
  <i class="fa fa-download"></i> Little
  </a>  &nbsp;&nbsp;
  <a onclick="Download(2)" href="javascript:;" >
  <i class="fa fa-download"></i> Medium
  </a>  &nbsp;&nbsp;
  <a onclick="Download(3)" href="javascript:;">
  <i class="fa fa-download"></i> Large
  </a>

All i want to do is write a function that takes parameter and download the image according to this parameter without changing the image which is shown in the html. Thanks a lot for any help.

what about using google and type `javascript download image from url`? from what I know you will need an URL pointing to the image — caramba, Oct 02 '15 at 06:32
I found how to download an image but I could not see any solution which allows changing the image size. — Harun Acar, Oct 02 '15 at 06:35
I dind't know untill now; I was sure you need to keep the images in the right sizes on the server, so you can change the image sizes there with what every language you are coding. anyway you can also resize images with javascript it you don't need support for IE<9. then google `javascript reisze images` and your question should change from `how to download` in `how to resize` .. — caramba, Oct 02 '15 at 06:38
Either you've got different files with different sizes on server and you set the img's src for the wanted one, either you only have one size and then use the img's `width` and `height` attribute — Kaiido, Oct 02 '15 at 06:44
Possible duplicate of [jQuery/Javascript to replace broken images](http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images) — , Oct 02 '15 at 06:45
there is this thing called `CSS` you should look it up, it has been all the rage for about a twelve years, it is what all the cool kids are using! — , Oct 02 '15 at 06:46

score 0 · Answer 1 · answered Oct 02 '15 at 06:53

Javascript has a nice Image object for this situations.

var anImageUrl  = "https://www.google.com.tr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"

downloadImage(anImageUrl);

// Wrapped as function according to requirement
function downloadImage(imgURL){
  // Constructor parameters are width and height
  var image = new Image(544, 184);

  image.src = imgURL;

  // Make sure image downloaded completely
  image.onload = function(){
    $("body").append(image);
  }
}

And

image.width = 200;
image.height = 300;

You may change image width and height at any time like previous block. Here is the live preview.

Additional info; that object have been using by some analytics tools usually to make async request.

score -1 · Answer 2 · answered Oct 02 '15 at 06:38

To start a download, it is enough to change the location of the page to the URL of the image, so the Download founction could do something like this:

function Download(id) {
  location.href = '/content/images/image' + id + '.png';
}

The web browser knows that this URL is not a web page to be displayed but rather a file to be downloaded and initiates a download of the resource as a file.

How to download an image with different sizes in jquery?

2 Answers2