JavaScript 是一种广泛使用的前端编程语言，它可以帮助我们在网页上实现各种交互效果。其中一个常见的需求就是下载图片。本文将介绍如何使用 JavaScript 下载图片，并提供详细的示例代码。
基本思路
要下载图片，我们需要先获取到该图片的 URL 地址，然后通过 JavaScript 发送 HTTP 请求获取图片数据，并将其保存为文件。具体流程如下：
- 获取图片的 URL 地址
- 使用 XMLHttpRequest 或 Fetch API 发送 HTTP 请求获取图片数据
- 将图片数据转换为 Blob 对象
- 创建并下载链接
- 点击链接触发下载
获取图片 URL
在使用 JavaScript 下载图片之前，我们需要先获得该图片的 URL 地址。通常情况下，图片的 URL 地址是由服务器返回的，我们可以通过 AJAX 请求或者使用 img 标签预加载图片来获取该地址。例如，在以下 HTML 代码中，我们可以通过 img 标签的 src 属性获取图片的 URL 地址：
---- ----------------------------------- -------------
在 JavaScript 中，我们可以通过以下方式获取该图片的 URL 地址：
----- ------ - ---------------------------------------
发送 HTTP 请求获取图片数据
在获取到图片的 URL 地址后，我们可以使用 XMLHttpRequest 或 Fetch API 发送 HTTP 请求获取图片数据。对于较老的浏览器，我们可以使用 XMLHttpRequest，例如：
----- --- - --- -----------------
--------------- ------- ------
---------------- - -------
---------- - ---------- -
-- ------------ --- ---- -
-- --------
----- ---- - --------------
-- --------
-
--
-----------对于较新的浏览器，我们可以使用 Fetch API，例如：
-------------
-------------- -- ----------------
---------- -- -
-- --------
-- --------
---将图片数据转换为 Blob 对象
在获取到图片数据后，我们需要将其转换为 Blob 对象。Blob（二进制大对象）是一个类文件对象，它通常包含二进制数据，例如图像、音频和视频等。
在使用 XMLHttpRequest 获取图片数据时，我们可以直接使用 response 属性获取 Blob 对象：
----- ---- - -------------
在使用 Fetch API 获取图片数据时，我们可以使用 blob() 方法获取 Blob 对象：
-------------
-------------- -- ----------------
---------- -- -
-- --------
-- --------
---创建并下载链接
在获取到图片数据，并将其转换为 Blob 对象后，我们可以创建并下载链接。在 JavaScript 中，我们可以使用 URL.createObjectURL() 方法创建一个 URL 对象，该对象代表着我们刚刚创建的 Blob 对象。例如：
----- --------- - --------------------------
接着，我们可以创建一个 a 标签，并将其 href 属性设置为上面创建的 URL 对象。我们还需要设置该标签的 download 属性，以便在点击链接时下载文件。例如：
----- ---- - ---------------------------- --------- - ---------- ------------- - ------------
触发下载
最后一步是触发下载。我们可以使用 click() 方法模拟用户点击链接的行为来触发下载。例如：
-------------
完整代码如下：
----- ------ - ---------------------------------------
-------------
-------------- -- ----------------
---------- -- -
----- --------- - --------------------------
----- ---- - ----------------------------
--------- - ----------
------------- - ------------
-------------
---总结
本文介绍了如何使用 JavaScript 下载图片，包
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/27561