图像尽收囊中：详解Node+Puppeteer图片爬取实战指南

2023-10-19 01:17:11

在这个互联互通、信息爆炸的时代，网络图片的价值和用途可谓是不可估量，它们可以丰富我们的学习和工作，也可以为我们的生活带来乐趣和灵感。如果你想将这些网络图片保存到本地电脑中，就需要借助网络图片爬取工具了。Node.js+Puppeteer就是一个非常棒的选择，它可以轻松实现网络图片的爬取。

一、项目搭建

初始化项目

首先，我们需要初始化一个Node.js项目，可以使用以下命令：
```
npm init -y
```
安装依赖

接下来，我们需要安装Puppeteer和相关依赖，可以使用以下命令：
```
npm install puppeteer
```

目录结构

为了保持项目结构的清晰，我们可以创建一个目录结构，如下所示：

- node_modules (存放依赖包)
- package.json (项目配置信息)
- src (存放源代码)
- package-lock.json (依赖包版本信息)

二、功能实现

图片DOM元素获取

首先，我们需要引入所需的模块，然后使用Puppeteer创建一个浏览器实例，并加载要爬取图片的网页，最后获取图片的DOM元素。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const images = await page.$('img');

  // 打印图片DOM元素的数量
  console.log(`Found ${images.length} images`);

  await browser.close();
})();

图片URL提取

获取图片的DOM元素后，我们需要提取图片的URL。我们可以使用以下代码：

const imageUrls = [];
for (const image of images) {
  const src = await image.getProperty('src');
  const url = await src.jsonValue();
  imageUrls.push(url);
}

图片保存

最后，我们需要将图片保存到本地电脑中。我们可以使用以下代码：

const fs = require('fs');

for (const imageUrl of imageUrls) {
  const response = await page.goto(imageUrl);
  const buffer = await response.buffer();
  fs.writeFile(`image-${i}.jpg`, buffer, (err) => {
    if (err) {
      console.error(err);
      return;
    }

    console.log(`Image ${i} saved successfully`);
  });

  i++;
}

三、完整代码示例

将上述代码片段组合起来，就可以得到一个完整的Node.js+Puppeteer网络图片爬取脚本，如下所示：

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const images = await page.$('img');

  // 打印图片DOM元素的数量
  console.log(`Found ${images.length} images`);

  const imageUrls = [];
  for (const image of images) {
    const src = await image.getProperty('src');
    const url = await src.jsonValue();
    imageUrls.push(url);
  }

  let i = 1;
  for (const imageUrl of imageUrls) {
    const response = await page.goto(imageUrl);
    const buffer = await response.buffer();
    fs.writeFile(`image-${i}.jpg`, buffer, (err) => {
      if (err) {
        console.error(err);
        return;
      }

      console.log(`Image ${i} saved successfully`);
    });

    i++;
  }

  await browser.close();
})();