Данные Jimp и его буфера работают не так, как ожидалось, для создания PDF-файлов с помощью puppeteer

Question

Я использую Jimp, https://www.npmjs.com/package/puppeteer-full-page-screenshot и puppeteer для создания полного снимка экрана, но данные BUFFER, которые я получаю от Jimp, и puppeteer-full-page-screenshot не работают в моем случае (данные буфера, которые я получаю from puppeteer ie png2 im мой код работает нормально, но 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();
        }

Console.log из png

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 } }

Console.log из png2

      <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)

Answer 1

У меня тоже возникла эта проблема, я использую 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();
  });

первый экземпляр лямбда-функции работает, я могу использовать приведенное выше, он успешно записывает снимок экрана полной страницы, однако, когда он переходит на использование 2-го, 3-го, 4-го и т. д. экземпляра лямбда-функции, я получаю следующее:

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 вернул два разных объекта?

Answer 2

Puppeteer не создает снимок экрана полной страницы, даже когда я использовал fullPage: true

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

мы можем сгенерировать снимок экрана всей страницы, используя https://www.npmjs.com/package/puppeteer-full-page-screenshot и Jimp, и в моем случае буферизованные данные, которые мы получаем от Jimp, не работали, что я исправил:-

      png.getBuffer('image/png', (err, Buff) => {
           req.current.image = Buffer;
        });

Answer 3

Сразу после этого я все еще испытывал проблемы с полноэкранными снимками экрана, независимо от того, что я пробовал, пакет выше, очень большое окно просмотра и т. Д., У всех были проблемы либо с обрезанием частей страницы, либо с большим количеством пробелов.

Однако до сих пор хорошо работало:

    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 });