Javascript 使用chrome远程界面的随机空白屏幕截图
以下是我的Macbook Pro 10.12.5教程: 下面是我的代码:Javascript 使用chrome远程界面的随机空白屏幕截图,javascript,node.js,google-chrome,google-chrome-headless,Javascript,Node.js,Google Chrome,Google Chrome Headless,以下是我的Macbook Pro 10.12.5教程: 下面是我的代码: const CDP = require('chrome-remote-interface'); const argv = require('minimist')(process.argv.slice(2)); const file = require('fs'); // CLI Args const url = argv.url || 'https://www.google.com'; const format = a
const CDP = require('chrome-remote-interface');
const argv = require('minimist')(process.argv.slice(2));
const file = require('fs');
// CLI Args
const url = argv.url || 'https://www.google.com';
const format = argv.format === 'jpeg' ? 'jpeg' : 'png';
const viewportWidth = argv.viewportWidth || 1440;
const viewportHeight = argv.viewportHeight || 900;
const delay = argv.delay || 0;
const userAgent = argv.userAgent;
const fullPage = argv.full;
// Start the Chrome Debugging Protocol
CDP(async function(client) {
// Extract used DevTools domains.
const {DOM, Emulation, Network, Page, Runtime} = client;
// Enable events on domains we are interested in.
await Page.enable();
await DOM.enable();
await Network.enable();
// If user agent override was specified, pass to Network domain
if (userAgent) {
await Network.setUserAgentOverride({userAgent});
}
// Set up viewport resolution, etc.
const deviceMetrics = {
width: viewportWidth,
height: viewportHeight,
deviceScaleFactor: 0,
mobile: false,
fitWindow: false,
};
await Emulation.setDeviceMetricsOverride(deviceMetrics);
await Emulation.setVisibleSize({width: viewportWidth, height: viewportHeight});
// Navigate to target page
await Page.navigate({url});
// Wait for page load event to take screenshot
Page.loadEventFired(async () => {
// If the `full` CLI option was passed, we need to measure the height of
// the rendered page and use Emulation.setVisibleSize
if (fullPage) {
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});
console.log(viewportWidth);
console.log(height);
await Emulation.setVisibleSize({width: viewportWidth, height: height});
// 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: 1});
}
setTimeout(async function() {
const screenshot = await Page.captureScreenshot({format});
const buffer = new Buffer(screenshot.data, 'base64');
file.writeFile('output.png', buffer, 'base64', function(err) {
if (err) {
console.error(err);
} else {
console.log('Screenshot saved');
}
client.close();
});
}, delay);
});
}).on('error', err => {
console.error('Cannot connect to browser:', err);
});
以下是我对一切的看法:
- “chrome启动器”:“^0.4.0”
- “chrome远程接口”:“^0.24.3”
- “最小值列表”:“^1.2.0”
- 谷歌Chrome 62.0.3181.0金丝雀
//wait Emulation.forceViewport({x:0,y:0,scale:1})代码>由于错误(节点:1304)未处理的PromisejectionWarning:未处理的承诺拒绝(拒绝id:1):TypeError:Emulation.forceViewport不是函数
这就是我跑步时发生的事情:
$ node autoscreenshot.js --full
1440
900
Screenshot saved
因此,它确实设置了屏幕和除空白屏幕截图以外的所有内容
让屏幕截图持续工作的唯一方法是使用以下代码:
const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const file = require('fs');
(async function() {
async function launchChrome() {
return await chromeLauncher.launch({
chromeFlags: [
'--disable-gpu'
// '--headless'
]
});
}
const chrome = await launchChrome();
const protocol = await CDP({
port: chrome.port
});
const {
DOM,
Network,
Page,
Emulation,
Runtime
} = protocol;
await Promise.all([Network.enable(), Page.enable(), Runtime.enable(), DOM.enable()]);
await Page.navigate({
url: 'https://www.yahoo.com/'
});
Page.loadEventFired(async() => {
console.log('Start Page.loadEventFired');
const {root: {nodeId: documentNodeId}} = await DOM.getDocument();
console.log('Start DOM.querySelector');
const {nodeId: bodyNodeId} = await DOM.querySelector({
selector: 'body',
nodeId: documentNodeId
});
console.log('Start DOM.getBoxModel');
const {model: {height}} = await DOM.getBoxModel({nodeId: bodyNodeId});
console.log('height=' + height);
console.log('Start Emulation.setVisibleSize');
await Emulation.setVisibleSize({width: 735, height: height});
console.log('Start Page.captureScreenshot');
const ss = await Page.captureScreenshot({format: 'png', fromSurface: true});
console.log('Start file.writeFile');
file.writeFile('output.png', ss.data, 'base64', function(err) {
if (err) {
console.log(err);
}
});
protocol.close();
chrome.kill();
});
})();
请注意,现在我使用的是chrome启动器
,但也删除了headless
。因此,它将弹出浏览器窗口。但它成功了,拍下了截图
所以我的问题是:
这只是Mac OSX Sierra上Canary 62中的一个bug吗
如果没有,如何解决这个问题,使无头方法适用于屏幕截图
更新1
我又尝试了两件事并取得了成功:
如果我在Mac上使用Chrome60(稳定版),它可以工作,我可以无头截图
如果我在Ubuntu上使用Chrome 60(beta版),它也适用于headless
因此,唯一不起作用的情况是无头金丝雀62,因为带浏览器的金丝雀62工作正常。真奇怪