无头Chrome屏幕截图的最大高度为16,384px?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无头Chrome屏幕截图的最大高度为16,384px?相关的知识,希望对你有一定的参考价值。
无论我尝试什么,无头Chrome 60(和59)的整页屏幕截图的最大高度为16,348px。
这不是内存问题。没有段错误,例如,没有FATAL:memory_linux.cc(35) Out of memory.
消息。没有。捕获屏幕截图是“成功的”。更改屏幕截图格式 - PNG或JPEG - 没有任何影响。
屏幕截图宽度可能会有所不同,但保存的屏幕截图的高度始终限制为16,348px。例,
1600x16384,1200x16384,2400x16384等
我用这个最小的代码(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();
});
我也找不到任何有用的Chrome switches。这是Chrome的硬编码限制吗? 16384是一个可疑数字(2 ^ 14 = 16,384)。如何增加这个高度?
答案
这是此错误中记录的Chromium的限制
https://bugs.chromium.org/p/chromium/issues/detail?id=770769&desc=2
以上是关于无头Chrome屏幕截图的最大高度为16,384px?的主要内容,如果未能解决你的问题,请参考以下文章
无头 chrome 中的 Autodesk forge 查看器,CONTEXT_LOST_WEBGL
javascript 使用Chrome无头捕获DOM元素截图Jest截图
Nightwatch测试在Headless chrome模式下找不到元素