用 JavaScript 下载图片

JavaScript 是一种广泛使用的前端编程语言，它可以帮助我们在网页上实现各种交互效果。其中一个常见的需求就是下载图片。本文将介绍如何使用 JavaScript 下载图片，并提供详细的示例代码。

基本思路

要下载图片，我们需要先获取到该图片的 URL 地址，然后通过 JavaScript 发送 HTTP 请求获取图片数据，并将其保存为文件。具体流程如下：

1. 获取图片的 URL 地址
2. 使用 XMLHttpRequest 或 Fetch API 发送 HTTP 请求获取图片数据
3. 将图片数据转换为 Blob 对象
4. 创建并下载链接
5. 点击链接触发下载

获取图片 URL

在使用 JavaScript 下载图片之前，我们需要先获得该图片的 URL 地址。通常情况下，图片的 URL 地址是由服务器返回的，我们可以通过 AJAX 请求或者使用 img 标签预加载图片来获取该地址。例如，在以下 HTML 代码中，我们可以通过 img 标签的 src 属性获取图片的 URL 地址：

<img src="https://example.com/image.jpg" id="myImage">

在 JavaScript 中，我们可以通过以下方式获取该图片的 URL 地址：

const imgUrl = document.getElementById('myImage').src;

发送 HTTP 请求获取图片数据

在获取到图片的 URL 地址后，我们可以使用 XMLHttpRequest 或 Fetch API 发送 HTTP 请求获取图片数据。对于较老的浏览器，我们可以使用 XMLHttpRequest，例如：

-- -------------------- ---- -------
----- --- - --- -----------------
--------------- ------- ------
---------------- - -------
---------- - ---------- -
  -- ------------ --- ---- -
    -- --------
    ----- ---- - --------------
    -- --------
  -
--
-----------

对于较新的浏览器，我们可以使用 Fetch API，例如：

fetch(imgUrl)
  .then(response => response.blob())
  .then(blob => {
    // 图片数据获取成功
    // 下一步操作...
  });

将图片数据转换为 Blob 对象

在获取到图片数据后，我们需要将其转换为 Blob 对象。Blob（二进制大对象）是一个类文件对象，它通常包含二进制数据，例如图像、音频和视频等。

在使用 XMLHttpRequest 获取图片数据时，我们可以直接使用 response 属性获取 Blob 对象：

const blob = xhr.response;

在使用 Fetch API 获取图片数据时，我们可以使用 blob() 方法获取 Blob 对象：

fetch(imgUrl)
  .then(response => response.blob())
  .then(blob => {
    // 图片数据获取成功
    // 下一步操作...
  });

创建并下载链接

在获取到图片数据，并将其转换为 Blob 对象后，我们可以创建并下载链接。在 JavaScript 中，我们可以使用 URL.createObjectURL() 方法创建一个 URL 对象，该对象代表着我们刚刚创建的 Blob 对象。例如：

const urlObject = URL.createObjectURL(blob);

接着，我们可以创建一个 a 标签，并将其 href 属性设置为上面创建的 URL 对象。我们还需要设置该标签的 download 属性，以便在点击链接时下载文件。例如：

const link = document.createElement('a');
link.href = urlObject;
link.download = 'image.jpg';

触发下载

最后一步是触发下载。我们可以使用 click() 方法模拟用户点击链接的行为来触发下载。例如：

link.click();

完整代码如下：

-- -------------------- ---- -------
----- ------ - ---------------------------------------

-------------
  -------------- -- ----------------
  ---------- -- -
    ----- --------- - --------------------------
    ----- ---- - ----------------------------
    --------- - ----------
    ------------- - ------------
    -------------
  ---

总结

本文介绍了如何使用 JavaScript 下载图片，包

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27561