chrome headless 를 이용한 웹페이지 이미지 full 캡쳐 > IT 기술백서

크롬드라이버 설치

[code]

yum -y install google-chrome-stable

[/code]

크롬드라이버 데몬으로 실행

[code]

$ google-chrome --headless --hide-scrollbars --remote-debugging-port=9222 --disable-gpu &; echo $!

[/code] 

: 뒤에 echo $! 는 프로세스 ID 출력

node 모듈 설치

[code]

$ npm install minimist chrome-remote-interface

[/code]

screenshot.js 파일 작성

[code]

const CDP = require('chrome-remote-interface');

const argv = require('minimist')(process.argv.slice(2));

const fs = require('fs');

const targetURL = argv.url;

const filename = argv.filename;

const viewport = [1440,900];

const screenshotDelay = 2000; // ms

const fullPage = argv.fullPage || false;

if(fullPage){

  console.log("will capture full page")

}

CDP(async function(client){

  const {DOM, Emulation, Network, Page, Runtime} = client;

  // Enable events on domains we are interested in.

  await Page.enable();

  await DOM.enable();

  await Network.enable();

  // change these for your tests or make them configurable via argv

  var device = {

    width: viewport[0],

    height: viewport[1],

    deviceScaleFactor: 0,

    mobile: false,

    fitWindow: false

  };

  // set viewport and visible size

  await Emulation.setDeviceMetricsOverride(device);

  await Emulation.setVisibleSize({width: viewport[0], height: viewport[1]});

  await Page.navigate({url: targetURL});

  Page.loadEventFired(async() => {

    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: device.width, height: height});

      await Emulation.setDeviceMetricsOverride({width: device.width, height:height, screenWidth: device.width, screenHeight: height, deviceScaleFactor: 1, fitWindow: false, mobile: false});

      await Emulation.setPageScaleFactor({pageScaleFactor:1});

    }

  });

  setTimeout(async function() {

    const screenshot = await Page.captureScreenshot({format: "png", fromSurface: true});

    const buffer = new Buffer(screenshot.data, 'base64');

    fs.writeFile(filename, buffer, 'base64', function(err) {

      if (err) {

        console.error(err);

      } else {

        console.log('filename:' + filename);

      }

    });

      client.close();

  }, screenshotDelay);

}).on('error', err => {

  console.error('Cannot connect to browser:', err);

});

[/code]

사용예

[code]

$ node js/screenshot.js --url https://naver.com --filename ./tmp/111.png --fullPage true

[/code]