Created
June 30, 2017 12:20
-
-
Save paulm17/add0e5057d4f4a3d63b27da5ab137e92 to your computer and use it in GitHub Desktop.
NodeJS Snapshot with Chrome Headless
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//node index3.js --url="https://www.eff.org" --viewportWidth 480 | |
const CDP = require('chrome-remote-interface'); | |
const argv = require('minimist')(process.argv.slice(2)); | |
const file = require('mz/fs'); | |
const timeout = require('delay'); | |
// 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 || true; | |
const output = argv.output || `output.${format === 'png' ? 'png' : 'jpg'}`; | |
init(); | |
async function init() { | |
try { | |
// Start the Chrome Debugging Protocol | |
const client = await CDP(); | |
// 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 | |
await Page.loadEventFired(); | |
await timeout(delay); | |
// 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 (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 | |
}); | |
} | |
const screenshot = await Page.captureScreenshot({format}); | |
const buffer = new Buffer(screenshot.data, 'base64'); | |
await file.writeFile(output, buffer, 'base64'); | |
console.log('Screenshot saved'); | |
client.close(); | |
} catch (err) { | |
console.error('Exception while taking screenshot:', err); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment