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

크롬드라이버 설치


yum -y install google-chrome-stable



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


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


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


node 모듈 설치


$ npm install minimist chrome-remote-interface



screenshot.js 파일 작성


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;


  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(, ‘base64’);


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

      if (err) {


      } else {

        console.log(‘filename:’ + filename);




  }, screenshotDelay);

}).on(‘error’, err => {

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






$ node js/screenshot.js –url –filename ./tmp/111.png –fullPage true


댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤