如何在Puppeteer中获取JPG图片及识别图片实际格式？

Hey Dan, 很高兴能帮你搞定这个电商爬取中的图片格式问题——我之前做WooCommerce商品导入时也踩过类似的坑，给你梳理几个实用的解决思路：

1. 强制Puppeteer请求JPG而非WebP #

服务器返回WebP是因为它检测到Puppeteer模拟的Chromium支持WebP格式。要绕开这个，最直接的方法是修改HTTP请求头，告诉服务器我们只接受JPG等格式：

await page.setExtraHTTPHeaders({
  'Accept': 'image/jpeg, image/png, image/gif, */*;q=0.8'
});

这里关键是去掉image/webp的接受声明，同时保留其他常用图片格式。大部分合规的服务器会根据这个头返回对应的JPG文件，不过建议你测试下目标站点是否遵守这个规则——少数站点可能会忽略Accept头，但电商供应商的站点一般都会支持。

2. 提取图片时先识别实际格式再保存 #

如果修改请求头不管用，你可以在Puppeteer中监听图片响应，通过Content-Type头判断实际返回的格式，再用正确的后缀保存：

const fs = require('fs').promises;

page.on('response', async (response) => {
  const url = response.url();
  // 匹配你爬取的图片URL规则，比如包含/images/且以.jpg结尾
  if (url.includes('/images/') && url.endsWith('.jpg')) {
    const contentType = response.headers()['content-type'];
    let fileExtension = '.jpg';
    if (contentType === 'image/webp') {
      fileExtension = '.webp';
    }

    // 下载图片并保存
    if (response.ok()) {
      const buffer = await response.buffer();
      const fileName = url.split('/').pop().replace('.jpg', fileExtension);
      await fs.writeFile(`./downloads/${fileName}`, buffer);
    }
  }
});

这种方法能精准获取图片的实际格式，避免保存的文件后缀和实际内容不匹配的问题。

3. Sharp可以自动识别图片类型并转换 #

Sharp对图片格式的处理非常智能，完全支持在转换前自动识别源文件格式：

直接转换（无需手动识别） #

不管源文件是WebP还是JPG，直接调用toFormat()就能转换：

const sharp = require('sharp');

sharp('./downloads/myimage.webp')
  .toFormat('jpeg', { quality: 90 })
  .toFile('./converted/myimage.jpg')
  .then(() => console.log('JPG转换完成'))
  .catch(err => console.error('转换失败:', err));

手动获取图片格式（可选） #

如果你需要提前判断格式再决定是否转换，可以用metadata()方法：

const metadata = await sharp('./downloads/myimage.webp').metadata();
console.log('源图片格式:', metadata.format); // 输出 'webp'

if (metadata.format === 'webp') {
  // 执行转换逻辑
}

总结建议 #

• 优先尝试修改Accept头强制请求JPG，这样能省掉后续转换的步骤，效率更高；
• 如果服务器不支持Accept头规则，再用响应监听的方法识别格式保存；
• Sharp的自动格式识别已经足够靠谱，不需要额外写复杂的格式检测逻辑。

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