基于Puppeteer的网页爬取：获取多图商品的高清图片

核心逻辑 #

电商网站的商品高清图通常不会直接加载在初始img标签的src属性里（节省带宽），常见的两种存储方式：要么把高清URL放在图片元素的自定义属性（比如data-large、data-original）或srcset的高分辨率条目里；要么需要点击缩略图触发大图加载。下面针对这两种场景给出实操方案：

场景1：高清URL直接存在于图片元素属性中 #

很多网站会把缩略图放在src，高清图URL藏在data-*属性或srcset里，直接提取即可：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('你的商品页面URL', { waitUntil: 'networkidle2' });

  // 等待商品图片区域加载完成（替换成你页面的实际选择器）
  await page.waitForSelector('.product-img-group img');

  // 提取所有高清图片URL
  const highResImages = await page.evaluate(() => {
    const imgElements = document.querySelectorAll('.product-img-group img');
    return Array.from(imgElements).map(img => {
      // 优先取自定义属性里的高清图
      let highResUrl = img.dataset.large || img.dataset.original;
      
      // 没有自定义属性的话，解析srcset里的最高分辨率URL
      if (!highResUrl && img.srcset) {
        const srcsetEntries = img.srcset.split(',').map(item => item.trim());
        // 按分辨率从高到低排序，取第一个
        const highestEntry = srcsetEntries.sort((a, b) => {
          const resA = parseInt(a.split(' ')[1]);
          const resB = parseInt(b.split(' ')[1]);
          return resB - resA;
        })[0];
        highResUrl = highestEntry.split(' ')[0];
      }
      
      // 以上都没有的话，退用当前src（可能是缩略图）
      return highResUrl || img.src;
    });
  });

  console.log('全部高清图片URL:', highResImages);
  await browser.close();
})();

场景2：需要点击缩略图加载高清图 #

部分网站的大图需点击缩略图后才会加载到指定容器（比如大图展示区），这种情况要遍历缩略图逐个点击提取：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('你的商品页面URL', { waitUntil: 'networkidle2' });

  // 等待缩略图列表加载完成（替换成你页面的实际选择器）
  await page.waitForSelector('.thumbnail-list img');
  const thumbnailCount = await page.$$eval('.thumbnail-list img', imgs => imgs.length);

  const highResImages = [];

  for (let i = 0; i < thumbnailCount; i++) {
    // 点击第i+1个缩略图
    await page.click(`.thumbnail-list img:nth-child(${i+1})`);
    // 等待大图加载完成（替换成你页面的大图容器选择器）
    await page.waitForSelector('.large-img-container img', { timeout: 5000 });
    // 提取大图URL
    const imgUrl = await page.$eval('.large-img-container img', img => img.src);
    highResImages.push(imgUrl);
    // 可选：加短延迟避免触发反爬
    await page.waitForTimeout(500);
  }

  console.log('全部高清图片URL:', highResImages);
  await browser.close();
})();

额外实用技巧 #

• 处理懒加载：若图片需滚动才加载，可在page.evaluate()里模拟滚动，或调用img.scrollIntoView()触发加载；
• 拦截网络请求：直接监听页面的图片请求，通过URL关键词（比如large、1600x1600）筛选高清图，无需解析DOM：

  await page.setRequestInterception(true);
  const highResImages = [];
  page.on('request', request => {
    if (request.resourceType() === 'image') {
      if (request.url().includes('large') || request.url().match(/\d{4}x\d{4}/)) {
        highResImages.push(request.url());
      }
    }
    request.continue();
  });
  await page.goto('你的商品页面URL');
  

• 反爬规避：设置真实user-agent，必要时加随机延迟，避免被网站封禁。

内容的提问来源于stack exchange，提问作者CodingJunkie