Skip to content

Instantly share code, notes, and snippets.

@schnerd

schnerd/index.js

Last active January 29, 2021 00:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save schnerd/b5f9b248d84ce147d43ca292de30ada1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save schnerd/b5f9b248d84ce147d43ca292de30ada1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. schnerd revised this gist May 4, 2017. 1 changed file with 3 additions and 6 deletions.
    9 changes: 3 additions & 6 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,9 +7,6 @@ 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 aspectRatio = viewportWidth / viewportHeight;
    const imgWidth = argv.imgWidth || viewportWidth;
    const imgHeight = Math.floor(imgWidth / aspectRatio);
    const delay = argv.delay || 0;
    const userAgent = argv.userAgent;
    const fullPage = argv.full;
    @@ -38,7 +35,7 @@ CDP(async function(client) {
    fitWindow: false,
    };
    await Emulation.setDeviceMetricsOverride(deviceMetrics);
    await Emulation.setVisibleSize({width: imgWidth, height: imgHeight});
    await Emulation.setVisibleSize({width: viewportWidth, height: viewportHeight});

    // Navigate to target page
    await Page.navigate({url});
    @@ -55,7 +52,7 @@ CDP(async function(client) {
    });
    const {model: {height}} = await DOM.getBoxModel({nodeId: bodyNodeId});

    await Emulation.setVisibleSize({width: imgWidth, height: 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});
    @@ -76,4 +73,4 @@ CDP(async function(client) {
    });
    }).on('error', err => {
    console.error('Cannot connect to browser:', err);
    });
    });
  2. schnerd revised this gist May 3, 2017. No changes.
  3. schnerd revised this gist May 3, 2017. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,12 +17,11 @@ const fullPage = argv.full;
    // Start the Chrome Debugging Protocol
    CDP(async function(client) {
    // Extract used DevTools domains.
    const {CSS, DOM, Emulation, Network, Page, Runtime} = client;
    const {DOM, Emulation, Network, Page, Runtime} = client;

    // Enable events on domains we are interested in.
    await Page.enable();
    await DOM.enable();
    await CSS.enable();
    await Network.enable();

    // If user agent override was specified, pass to Network domain
  4. schnerd revised this gist May 3, 2017. 1 changed file with 10 additions and 10 deletions.
    20 changes: 10 additions & 10 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,16 +3,16 @@ const argv = require('minimist')(process.argv.slice(2));
    const file = require('fs');

    // CLI Args
    var url = argv.url || 'https://www.google.com';
    var format = argv.format === 'jpeg' ? 'jpeg' : 'png';
    var viewportWidth = argv.viewportWidth || 1440;
    var viewportHeight = argv.viewportHeight || 900;
    var aspectRatio = viewportWidth / viewportHeight;
    var imgWidth = argv.imgWidth || viewportWidth;
    var imgHeight = Math.floor(imgWidth / aspectRatio);
    var delay = argv.delay || 0;
    var userAgent = argv.userAgent;
    var fullPage = argv.full;
    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 aspectRatio = viewportWidth / viewportHeight;
    const imgWidth = argv.imgWidth || viewportWidth;
    const imgHeight = Math.floor(imgWidth / aspectRatio);
    const delay = argv.delay || 0;
    const userAgent = argv.userAgent;
    const fullPage = argv.full;

    // Start the Chrome Debugging Protocol
    CDP(async function(client) {
  5. schnerd revised this gist May 3, 2017. 1 changed file with 2 additions and 10 deletions.
    12 changes: 2 additions & 10 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -41,19 +41,11 @@ CDP(async function(client) {
    await Emulation.setDeviceMetricsOverride(deviceMetrics);
    await Emulation.setVisibleSize({width: imgWidth, height: imgHeight});

    // Navigate to target page and store frameId for later usage
    const {frameId} = await Page.navigate({url});
    // Navigate to target page
    await Page.navigate({url});

    // Wait for page load event to take screenshot
    Page.loadEventFired(async () => {
    // Add a CSS rule that hides scrollbars in screenshot
    const {styleSheetId} = await CSS.createStyleSheet({frameId: frameId});
    await CSS.addRule({
    styleSheetId: styleSheetId,
    ruleText: '::-webkit-scrollbar { display: none; }',
    location: {startLine: 0, startColumn: 0, endLine: 0, endColumn: 0},
    });

    // If the `full` CLI option was passed, we need to measure the height of
    // the rendered page and use Emulation.setVisibleSize
    if (fullPage) {
  6. schnerd created this gist Apr 16, 2017.
    88 changes: 88 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    const CDP = require('chrome-remote-interface');
    const argv = require('minimist')(process.argv.slice(2));
    const file = require('fs');

    // CLI Args
    var url = argv.url || 'https://www.google.com';
    var format = argv.format === 'jpeg' ? 'jpeg' : 'png';
    var viewportWidth = argv.viewportWidth || 1440;
    var viewportHeight = argv.viewportHeight || 900;
    var aspectRatio = viewportWidth / viewportHeight;
    var imgWidth = argv.imgWidth || viewportWidth;
    var imgHeight = Math.floor(imgWidth / aspectRatio);
    var delay = argv.delay || 0;
    var userAgent = argv.userAgent;
    var fullPage = argv.full;

    // Start the Chrome Debugging Protocol
    CDP(async function(client) {
    // Extract used DevTools domains.
    const {CSS, DOM, Emulation, Network, Page, Runtime} = client;

    // Enable events on domains we are interested in.
    await Page.enable();
    await DOM.enable();
    await CSS.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: imgWidth, height: imgHeight});

    // Navigate to target page and store frameId for later usage
    const {frameId} = await Page.navigate({url});

    // Wait for page load event to take screenshot
    Page.loadEventFired(async () => {
    // Add a CSS rule that hides scrollbars in screenshot
    const {styleSheetId} = await CSS.createStyleSheet({frameId: frameId});
    await CSS.addRule({
    styleSheetId: styleSheetId,
    ruleText: '::-webkit-scrollbar { display: none; }',
    location: {startLine: 0, startColumn: 0, endLine: 0, endColumn: 0},
    });

    // 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});

    await Emulation.setVisibleSize({width: imgWidth, 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);
    });