Nodejs puppeteer 批量截图如何保证截图质量

Nodejs puppeteer 批量截图如何保证截图质量

外层 for 循环任务列表。贴出里面的代码

// 启动 Chromium
      const browser = await puppeteer.launch({ ignoreHTTPSErrors: true, headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] }).catch( err => {
        console.log('launch-err: ' + err)
        reject('fail')
      })
      // 打开新页面
      const page = await browser.newPage()
      // 设置页面分辨率
      await page.setViewport({ width: 1920, height: 1080 })

      // 访问
      console.log('website-> ' + taskInfo[2])
      await page.goto(taskInfo[2], { waitUntil: ['domcontentloaded', 'load','networkidle0'] }).catch(err => {
        console.log('goto-err-> ' + err)
        reject('fail')
      })
      await page.waitFor(5000)

      try {
        // 截图
        await page.screenshot({ path: snapShotFolerPath + snapshotName, fullPage: true }).catch(err => {
          console.log('screenshot-err-> ' + err)
          reject('fail')
        })
      } catch (e) {
        reject('fail')
        console.log('failed ' + e)
      }

现在遇到的问题是截图可以成功，但是发现某些截图会遇到空白或 404 的情况，请问大佬们如何解决这问题的


1 回复

在使用Node.js和Puppeteer进行批量截图时，保证截图质量是关键。以下是一些建议，包括代码示例，以帮助你实现这一目标：

  1. 设置截图参数：

    • 在调用page.screenshot()时，可以传递一个对象来设置截图参数，如格式、质量等。

    • 示例代码：

      await page.screenshot({
  type: 'png', // 或 'jpeg'
  quality: 100, // 质量范围通常为0-100，png格式不适用
  fullPage: true, // 是否截取整个页面
});

  2. 优化浏览器设置：

    • 调整Puppeteer启动时的视口（viewport）设置，以确保页面内容在截图时能够完整显示。

    • 示例代码：

      const browser = await puppeteer.launch({
  headless: true,
  defaultViewport: { width: 1920, height: 1080 },
});

  3. 处理特殊元素：

    • 对于验证码等需要精确截取的元素，可以使用Canvas进行绘制后再截图，以避免元素偏移等问题。

  4. 批量处理：

    • 在批量截图时，注意控制并发数量，避免内存占用过高导致截图质量下降。

  5. 错误处理：

    • 添加错误处理逻辑，以便在截图失败时能够重新尝试或记录错误信息。

通过以上方法，你可以在使用Node.js和Puppeteer进行批量截图时，有效保证截图质量。

回到顶部