下载图片 jQuery onClick - JavaScript

当我们需要从一个 Web 页面中下载一张图片时，我们可以使用 JavaScript 和 jQuery 来帮助实现这个功能。在此介绍一个实现该功能的简单方法。

HTML 代码片段

首先，我们需要在 HTML 中添加一些代码片段来显示图像和一个下载按钮：

<img id="myImg" src="image.png" alt="My Image">
<button onclick="downloadImg()">Download Image</button>

JavaScript 代码片段

然后，在 JavaScript 中实现 downloadImg 函数以处理下载事件。以下是完整的代码片段：

function downloadImg() {
  var img = document.getElementById("myImg");
  var url = img.getAttribute("src");
  var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];

  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(xhr.response);
    a.download = filename;
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    delete a;
  };
  xhr.open('GET', url);
  xhr.send();
}

该函数执行以下步骤：

1. 获取图像元素和其 URL。
2. 从 URL 中提取文件名。
3. 创建一个 XMLHttpRequest 对象，将其响应类型设置为 blob。
4. 在响应中创建一个下载链接，并自动单击该链接。
5. 删除该链接。

实现过程

1. 获取图像元素

我们使用 document.getElementById() 方法获取图像元素，并将其存储在变量 img 中：

var img = document.getElementById("myImg");

2. 获取图像 URL

我们使用 getAttribute() 方法获取图像元素的 URL。我们还从 URL 中提取文件名：

var url = img.getAttribute("src");
var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];

3. 创建 XMLHttpRequest 对象

我们使用 XMLHttpRequest 对象来发出 HTTP 请求获取图像文件。我们将其响应类型设置为 blob 类型。这意味着我们期望响应是一个二进制流。

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';

4. 创建下载链接

我们在响应中创建一个下载链接，并将其附加到页面上。我们采用以下步骤：

• 创建链接元素 (<a> 标签)。
• 将链接元素的 href 属性设置为响应的 URL。
• 将链接元素的 download 属性设置为文件名。
• 设置该元素的样式以便自动隐藏它。
• 在页面中最后添加链接元素。
• 通过调用 click() 方法自动点击该链接。

xhr.onload = function() {
  var a = document.createElement('a');
  a.href = window.URL.createObjectURL(xhr.response);
  a.download = filename;
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  delete a;
};

5. 删除链接

我们最后从页面中删除该链接：

delete a;

结论

通过以上步骤，我们就可以实现在 Web 页面中下载图像的功能。如果您碰到了任何问题，请在下面评论区留言。