Jimp and it's Buffer data is not working as expected for PDF Generation with puppeteer

Question

I am using Jimp , puppeteer-full-page-screenshot & puppeteer to generate full page screenshot but the BUFFER data which i am getting from Jimp and puppeteer-full-page-screenshot is not working in my case (Buffer data which i am getting from puppeteer i.e png2 im my code is working fine but png is generating error.)

    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;

and for to generate pdf i have following

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

if i use png2 it is working fine but with png i will receive error with following :-

  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)

score 0 · Answer 1 · answered Jan 30 '20 at 10:24

Puppeteer is not generated full page screenshot even when i was using fullPage: true

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

we can generate full page screenshot by using puppeteer-full-page-screenshot and Jimp and In my case Buffered data which we are getting from Jimp, was not working which i fixed with :-

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

score 0 · Answer 2 · answered Jun 16 '20 at 19:27

I'm also experiencing this issue, I'm using Lambda/Serverless and the same puppeteer-full-page-screenshot package, but my issue is slightly different.

No matter how I express the following:

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

the first instance of the lambda function works, I'm able to use the above, it writes a fullpage screenshot successfully, however, when it goes to use the 2nd, 3rd, 4th etc instance of the lambda function, I get the following:

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

dumping screenshotFullPage when it errors, I get the following:

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

whereas the first function that works:

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

so it safe it use screenshotFullPage.bitmap.data? as that's what's always available? Why does the Jimp returned two different objects?

score 0 · Answer 3 · answered Oct 28 '20 at 14:18

Just following up, I still experienced issues with full page screenshots, no matter what I tried, the package above, very large viewport, etc, all had issues with either cutting off the parts of the page, or having a lot of whitespace.

However, what has worked pretty well so far is:

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

Yes i have similar issue of whitespace with this final full page screenshots I have divided with certain value for that page height to remove white space from that screenshot. and Sorry for the late response. — Asumoon, Jan 08 '21 at 04:36

Jimp and it's Buffer data is not working as expected for PDF Generation with puppeteer

3 Answers3