4

我正在使用Jimp、 puppeteer -full-page-screenshot和 puppeteer 生成整页屏幕截图，但是我从 Jimp 和 puppeteer-full-page-screenshot 获得的 BUFFER 数据在我的情况下不起作用（我得到的缓冲区数据来自 puppeteer 即png2我的代码工作正常，但png 正在生成错误。）

    const browser = await puppeteer.launch({ headless: true, timeout: 100000, 
            ignoreHTTPSErrors: true, args: ['--no-sandbox', '--disable-setuid-sandbox']});
    const page = await browser.newPage();
    await page.setViewport({ width: 1780, height: 2180 });
    await page.goto(current.url, { waitUntil: 'networkidle2' });
    await page.waitFor(7000);

    const png = await fullPageScreenshot(page);
    console.log(png);
    req.current.image = image.bitmap.data;

    // const png2 = await page.screenshot({ fullpage: true });
    // console.log(png2);
    // req.current.image = png2;

为了生成 pdf 我有以下

      doc.image(req.current.image, {
                fit: [595.28, 841.89],
                align: 'center',
                valign: 'center'
            })
            .fillColor('blue')
            .text('Date Created: ' + dt, 100, 30)
            .underline(100, 22, 300, 27, { color: '#0000FF' });
            doc.addPage();
        }

png的控制台.log 

Jimp {
   _background: 0,
   bitmap:
   { data:
      <Buffer ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff 
            ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ... 
            63816510 more bytes>,
      width: 1780,
      height: 8963 } }

png2的Console.log

      <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 06 f4 00 00 08 84 08 06 00 00 00 7c 57 82 1b 00 00 00 01 73 52 47 42 00 ae ce 1c e9 00 00 20 00 ... 1457642 more bytes>

如果我使用png2它工作正常，但使用png我会收到以下错误：-

  Error handler:  Error: Unknown image format.
    at Function.open(/media/root/EC783AF8783AC15E/node_modules/pdfkit/js/pdfkit.js:3820:13)
    at PDFDocument.openImage 
            (/media/root/EC783AF8783AC15E/node_modules/pdfkit/js/pdfkit.js:3936:24)
    at PDFDocument.image 
            (/media/root/EC783AF8783AC15E/node_modules/pdfkit/js/pdfkit.js:3852:22)
4

3 回答 3

0

只是跟进，我仍然遇到整页截图的问题，无论我尝试什么，上面的包，非常大的视口等，都存在切断页面部分或有很多空白的问题。

但是，到目前为止效果很好的是：

    await page.goto(url, ...)

    const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
    const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
    
    await page.setViewport({ width: bodyWidth, height: bodyHeight });
于 2020-10-28T14:18:10.993 回答
0

即使我使用 fullPage，Puppeteer 也不会生成整页截图：true

      await page.screenshot({ fullPage: true});

我们可以使用puppeteer -full-page-screenshot和 Jimp 生成整页屏幕截图，在我的情况下，我们从 Jimp 获得的缓冲数据不起作用，我使用以下方法修复：-

      png.getBuffer('image/png', (err, Buff) => {
           req.current.image = Buffer;
        });
于 2020-01-30T10:24:44.140 回答
0

我也遇到了这个问题，我正在使用 Lambda/Serverless 和相同的 puppeteer-full-page-screenshot 包，但我的问题略有不同。

无论我如何表达以下内容：

const screenshotFullPage = await fullPageScreenshot(page);

screenshotFullPage
  .getBufferAsync('image/png')
  .then(async buffer => {
    let params = {
      ContentType: 'image/png',
      Bucket: 'polsenv-builds',
      Key: `${paths.screenshotPath}/${slug}.png`,
      Body: buffer,
    };

    await s3.putObject(params).promise();
  });

lambda函数的第一个实例有效，我可以使用上面的，它成功地编写了一个完整的屏幕截图，但是，当它使用lambda函数的第二个、第三个、第四个等实例时，我得到以下信息：

TypeError: screenshotFullPage.getBufferAsync is not a function
    at Prerender.renderPage (...)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)

错误时转储screenshotFullPage，我得到以下信息：

Jimp {
  _background: 0,
  bitmap:
   { data:
      <Buffer 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 ... 27505390 more bytes>,
     width: 1080,
     height: 6367 } }

而第一个起作用的功能：

Jimp {
  domain: null,
  _events: [Object: null prototype] {},
  _eventsCount: 0,
  _maxListeners: undefined,
  bitmap:
   { width: 1080,
     height: 1440,
     depth: 8,
     interlace: false,
     palette: false,
     color: true,
     alpha: true,
     bpp: 4,
     colorType: 6,
     data:
      <Buffer 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00 ... 6220750 more bytes>,
     gamma: 0 },
  _background: 0,
  _originalMime: 'image/png',
  _exif: null,
  _rgba: true,
  writeAsync: [Function],
  getBase64Async: [Function],
  getBuffer: [Function: getBuffer],
  getBufferAsync: [Function: getBufferAsync],
  getPixelColour: [Function: getPixelColor],
  setPixelColour: [Function: setPixelColor] }

所以它使用安全screenshotFullPage.bitmap.data吗？因为那总是可用的？为什么 Jimp 返回两个不同的对象？

于 2020-06-16T19:27:27.650 回答