Question

我想创建按钮，使每个按钮在页面中下载不同大小的图像。这是我的形象：

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

这些是我的按钮：

  <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>

我想做的就是编写一个带参数的函数，并根据此参数下载图像，而不更改html中显示的图像。非常感谢您的帮助。

Answer 1

对于这种情况，Javascript有一个很好的Image对象。

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);
  }
}

和

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

您可以随时更改图像的宽度和高度，就像上一个块一样。 Here is the live preview

其他信息;该对象通常被一些分析工具用于发出异步请求。

Answer 2

要开始下载，只需将页面的位置更改为图像的URL即可，因此下载功能可以执行以下操作：

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

网络浏览器知道此网址不是要显示的网页，而是要下载的文件，并启动将资源下载为文件。

如何在jquery中下载不同大小的图像？

2 个答案: