Help us understand the problem. What is going on with this article?

Puppeteerを使って指定したDOMのみのスクリーンショットを取得する

More than 1 year has passed since last update.

噂のHeadless Chrome ライブラリ Puppeteer を使って
指定したDOMのみのスクリーンショットを取得してみました。

実は以前同じことを Nigthmare.jsを使ってやろうとしたのですが
うまく行かず諦めてしまいましたが
Puppeteerで試してみたらすんなり実現できました :ok_hand:

コード

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.waitFor(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の位置と大きさを指定するように
修正しました。

参考: http://qiita.com/akameco/items/2bb90da68deb0e67d9a2#_reference-d4735b07e7ac27ea55b4

取得したスクリーンショット

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

指定したところだけキレイにスクリーンショットがとれています:sparkles:
(どうでもいいですけどpuppeteerの日本語訳かっけぇ!)

tamanugi
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした