Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Max height of 16,384px for headless Chrome screenshots?

No matter what I try, the maximum height of a full-page screenshot with headless Chrome 60 (and 59) is 16,348px.

It is not a memory issue. There are no segfaults and no, for example, FATAL:memory_linux.cc(35) Out of memory. messages. None. Capturing screenshots are "successful". Changing the screenshot format - PNG or JPEG - has no affect.

The screenshot width can vary, but the height of the saved screenshot is always limited to 16,348px. Example,

1600x16384, 1200x16384, 2400x16384, etc.

I'm taking upscaled screenshots with this minimal code (full source):

const upscale = 2;

const viewportWidth = 1200;
const viewportHeight = 800;

....

// Set up viewport resolution, etc.
const deviceMetrics = {
    width: viewportWidth,
    height: viewportHeight,
    deviceScaleFactor: 0,
    mobile: false,
    fitWindow: false,
    scale: 1    // Relative to the upscale
};
await Emulation.setDeviceMetricsOverride(deviceMetrics);
await Emulation.setVisibleSize({width: viewportWidth, height: viewportHeight});
await Emulation.setPageScaleFactor({pageScaleFactor: upscale});

// Navigate to target page
await Page.navigate({url});

const {root: {nodeId: documentNodeId}} = await DOM.getDocument();
const {nodeId: bodyNodeId} = await DOM.querySelector({
    selector: 'body',
    nodeId: documentNodeId,
});
const {model: {height}} = await DOM.getBoxModel({nodeId: bodyNodeId});

// Upscale the dimensions for full page
await Emulation.setVisibleSize({width: Math.round(viewportWidth * upscale), height: Math.round(height * upscale)});

// This forceViewport call ensures that content outside the viewport is
// rendered, otherwise it shows up as grey. Possibly a bug?
await Emulation.forceViewport({x: 0, y: 0, scale: upscale});

const screenshot = await Page.captureScreenshot({format});
const buffer = new Buffer(screenshot.data, 'base64');

file.writeFile(outFile, buffer, 'base64', function (err) {
    if (err) {
        console.error('Exception while saving screenshot:', err);
    } else {
        console.log('Screenshot saved');
    }
    client.close();
});

I was unable to find any useful Chrome switches either. Is this a hardcoded limit of Chrome? 16384 is a suspicious number (2^14 = 16,384). How can this height be increased?

like image 569
Drakes Avatar asked Jun 17 '17 01:06

Drakes


1 Answers

This is a limitation of Chromium as documented in this bug

https://bugs.chromium.org/p/chromium/issues/detail?id=770769&desc=2

like image 186
GBP Avatar answered Oct 18 '22 11:10

GBP