Puppeteer: Clipped screenshot above 10,000px fails

Created on 2 Oct 2017  路  1Comment  路  Source: puppeteer/puppeteer

I'm experimenting with trying to get screenshots of the fullpage past the 16k pixel limit (crbug.com/770769)... however some basics dont' seem to work.

Below my second screenshot, full2.png, doesn't extend past the 16384 limit, but regardless, the screenshot returned is all white pixels. (The first screenshot succeeds just fine)

'use strict';
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');

(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.emulate(devices['iPhone 6']);
await page.goto('http://news.bbc.co.uk');

await page.screenshot({path: 'full.png', clip: {
    x: 0, y: 0,
    width: 375, height: 10000
}});
await page.screenshot({path: 'full2.png', clip: {
    x: 0, y: 10000,
    width: 375, height: 6000
}});

await browser.close();
})();

Most helpful comment

Nevermind, the DPR of 2 was throwing me off. This technique is possible.

With a DPR of 2, you'll want heights of 8192 maximum.

Here's a working approach:

await page.screenshot({path: 'full.png', clip: {
    x: 0, y: 0,
    width: 375, height: 8000
}});
await page.screenshot({path: 'full2.png', clip: {
    x: 0, y: 8000,
    width: 375, height: 8000
}});

_EDIT:_ I've packaged this technique into a simple example: https://github.com/GoogleChrome/puppeteer/pull/937

>All comments

Nevermind, the DPR of 2 was throwing me off. This technique is possible.

With a DPR of 2, you'll want heights of 8192 maximum.

Here's a working approach:

await page.screenshot({path: 'full.png', clip: {
    x: 0, y: 0,
    width: 375, height: 8000
}});
await page.screenshot({path: 'full2.png', clip: {
    x: 0, y: 8000,
    width: 375, height: 8000
}});

_EDIT:_ I've packaged this technique into a simple example: https://github.com/GoogleChrome/puppeteer/pull/937

Was this page helpful?
0 / 5 - 0 ratings