npm 包 img-crawler 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要使用图片资源来为页面添加视觉效果。而有时候我们需要大量的图片资源，手动一个一个去下载十分麻烦。这个时候，我们可以使用 npm 包 img-crawler 来帮助我们快速下载图片资源。

img-crawler 简介

img-crawler 是一款基于 Node.js 的 npm 包，它能够帮助我们快速下载特定页面上的所有图片资源，并且支持自定义配置，对于需要使用大量图片的前端开发者来说，这个工具是一个不错的选择。

安装 img-crawler

在使用 img-crawler 前，我们需要先安装它。可以使用 npm 进行安装：

npm install img-crawler --save-dev

使用 img-crawler

接下来，我们来看看如何使用 img-crawler。

引入 img-crawler

要使用 img-crawler，我们需要先引入它：

const imgCrawler = require('img-crawler');

设置配置项

在引入 img-crawler 后，我们需要设置一些配置项，这些配置项将决定使用 img-crawler 时究竟下载哪些图片资源。具体配置项如下：

urls：需要下载图片的页面地址，可以是一个字符串或字符串数组。
dist：下载图片的目标地址，默认为当前进程的工作目录。
headers：向请求中添加的报头。
concurrency：同时下载文件的数量，默认为 10。
filters：需要过滤的图片链接，例如可以使用正则表达式进行过滤。

同时下载的数量，对于一些单核运行的机器，建议控制在 2 个或以下。

启动图片下载

设置完配置项后，我们就可以启动图片下载了。可以使用如下代码：

imgCrawler(options, () => {
    console.log("All images downloaded!");
});

其中，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

npm 包 img-crawler 使用教程