在前端开发中，经常需要使用图片资源来为页面添加视觉效果。而有时候我们需要大量的图片资源，手动一个一个去下载十分麻烦。这个时候，我们可以使用 npm 包 img-crawler 来帮助我们快速下载图片资源。
img-crawler 简介
img-crawler 是一款基于 Node.js 的 npm 包，它能够帮助我们快速下载特定页面上的所有图片资源，并且支持自定义配置，对于需要使用大量图片的前端开发者来说，这个工具是一个不错的选择。
安装 img-crawler
在使用 img-crawler 前，我们需要先安装它。可以使用 npm 进行安装：
--- ------- ----------- ----------
使用 img-crawler
接下来，我们来看看如何使用 img-crawler。
引入 img-crawler
要使用 img-crawler，我们需要先引入它：
----- ---------- - -----------------------
设置配置项
在引入 img-crawler 后，我们需要设置一些配置项，这些配置项将决定使用 img-crawler 时究竟下载哪些图片资源。具体配置项如下：
- urls：需要下载图片的页面地址，可以是一个字符串或字符串数组。
- dist：下载图片的目标地址，默认为当前进程的工作目录。
- headers：向请求中添加的报头。
- concurrency：同时下载文件的数量，默认为 10。
- filters：需要过滤的图片链接，例如可以使用正则表达式进行过滤。
同时下载的数量，对于一些单核运行的机器，建议控制在 2 个或以下。
启动图片下载
设置完配置项后，我们就可以启动图片下载了。可以使用如下代码：
------------------- -- -- -
---------------- ------ --------------
---其中，options 为配置项，第二个参数为回调函数，用于在所有图片下载完成后输出信息。
使用示例
假设我们需要下载 https://unsplash.com 上与“nature”相关的所有图片资源。我们可以通过以下代码实现：
----- ---------- - -----------------------
------------
----- ---------------------------------------
----- ------------
-------- ----------------------------------------
-------- -
------------- ------------ -------- -- ----- ------ ---- ------------------ ------- ---- ------ -------------------- ------------- --------------
--
------------ -
-- -- -- -
---------------- ------ --------------
---以上代码将会下载 https://unsplash.com 上所有与 nature 相关的图片资源，并保存在当前目录下的 images 文件夹中。其中，所有以 https://images.unsplash.com/ 开头的图片链接将被下载，同时每次下载数量将不超过 5 张。
结语
通过使用 npm 包 img-crawler，我们可以轻松地批量下载特定页面上的所有图片。在实际的前端项目中，我们可以用它来下载一些样例图片资源或者是我们自己的资源。而 img-crawler 的自定义配置功能，也让我们能够灵活地控制图片的下载。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/94069