소문의 헤드리스 크롬 라이브러리 Puppeteer를 사용하여
지정한 DOM만의 스크린샷을 얻어 보았습니다.

실은 이전에 같은 것을 Nigthmare.js 를 사용해 하려고 했습니다만
잘 가지 않고 포기했지만Puppeteer에서 시도해 보면 쉽게 실현되었습니다

코드

app.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: true});
  const page = await browser.newPage();

  const targetElementSelector = '#tw-container'

  await page.goto('https://google.co.jp')
  await page.type('pupperteer 翻訳')
  await page.click('#tsf > div.tsf-p > div.jsb > center > input[type="submit"]:nth-child(1)')

  await page.waitForSelector(targetElementSelector)

  await page.screenshot({path: 'page-ss.png'})

  const clip = await page.evaluate(s => {
    const el = document.querySelector(s)

    // エレメントの高さと位置を取得
    const { width, height, top: y, left: x } = el.getBoundingClientRect()
    return { width, height, x, y }
  }, targetElementSelector)

  // スクリーンショットに位置と大きさを指定してclipする
  await page.screenshot({ clip, path: 'tw-container-ss.png' })

  browser.close();
})();

google에서 puppeteer 翻訳를 검색하고,
검색 결과 화면의 번역 결과를 표시하는 부분만의 스크린샷을 얻는 코드가 됩니다.

윈도우의 스크롤은 API에서 제공되지 않는 것 같습니다.
evalueate 내에서 실행 중

(2017/09/18 추가)
@akameco 님에게 댓글을 달았습니다.
화면에서 스크롤하여 크기를 변경하는 대신
스크린샷에서 지정한 DOM의 위치와 크기를 지정하도록
수정했습니다.

참고: ぃ tp // 코 m / 아카 메코 / ms / 2 b90, 68 b0 67d9 2 # _ 레후 렌세 d4735b07 7 7 c27 55b4

획득한 스크린샷

▽page-ss.png
▽tw-container-ss.png






지정한 곳만 깨끗하게 스크린샷을 찍었습니다
(아무래도 좋지만 puppeteer의 일본어 번역 껏!)