[Document & Workflow] webkit2png でコマンドラインからWebページのスクリーンショットをとる

そもそも、最近こんなサービスを見つけてFree版を使ってみたところ、解像度が足りなかったので、ローカルでできないかと思った次第。

[markdown]
> * [Page2Images – Free Convert URL to image in batch](http://www.page2images.com/free_convert_website_url_to_images_in_batch)

前回うまく解決できなかったので調べていたところ、他の方法もあるようなので試してみました。

> * [paulhammond/webkit2png](https://github.com/paulhammond/webkit2png/)
> * [[screenshot] – 橋本詳解](http://d.hatena.ne.jp/shokai/searchdiary?word=%2A%5Bscreenshot%5D)
> * [WebKitを使ってスクリーンショットを取得「webkit2png」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ](http://www.moongift.jp/2010/03/webkit2png/)

## インストール

“`prettyprinted
% brew install webkit2png
“`

## 使い方

“`prettyprinted
% webkit2png https://www.d-wood.com
Fetching https://www.d-wood.com …
… done
“`

* [wwwdwoodcom-clipped.png](https://www.d-wood.com/wpmt/wp-content/uploads/2013/12/wwwdwoodcom-clipped.png) – Visible Part of Page Thumbnail
* [wwwdwoodcom-thumb.png](https://www.d-wood.com/wpmt/wp-content/uploads/2013/12/wwwdwoodcom-thumb.png) – Entire Page Thumbnail
* [wwwdwoodcom-full.png](https://www.d-wood.com/wpmt/wp-content/uploads/2013/12/wwwdwoodcom-full.png) – Entire Page

> * [コマンドラインからスクリーンショットを取得するwebkit2png – brainstorm](http://d.hatena.ne.jp/yuheiomori0718/20130815/1376577251)

Web Font も表示されていて、そのまま便利に使えそうです。

### option

オプションもいろいろ指定できるようです。

“`prettyprinted
% webkit2png -h
Usage: webkit2png [options] [http://example.net/ …]
Examples:
webkit2png http://google.com/ # screengrab google
webkit2png -W 1000 -H 1000 http://google.com/ # bigger screengrab of google
webkit2png -T http://google.com/ # just the thumbnail screengrab
webkit2png -TF http://google.com/ # just thumbnail and fullsize grab
webkit2png -o foo http://google.com/ # save images as “foo-thumb.png” etc
webkit2png – # screengrab urls from stdin
webkit2png -h | less # full documentation
Options:
–version show program’s version number and exit
-h, –help show this help message and exit
Browser Window Options:
-W WIDTH, –width=WIDTH
initial (and minimum) width of browser (default: 800)
-H HEIGHT, –height=HEIGHT
initial (and minimum) height of browser (default: 600)
-z ZOOM, –zoom=ZOOM
zoom level of browser, equivalent to “Zoom In” and
“Zoom Out” in “View” menu (default: 1.0)
Output size options:
-F, –fullsize only create fullsize screenshot
-T, –thumb only create thumbnail sreenshot
-C, –clipped only create clipped thumbnail screenshot
–clipwidth=WIDTH width of clipped thumbnail (default: 200)
–clipheight=HEIGHT
height of clipped thumbnail (default: 150)
-s SCALE, –scale=SCALE
scale factor for thumbnails (default: 0.25)
Output filename options:
-D DIR, –dir=DIR directory to place images into
-o NAME, –filename=NAME
save images as NAME-full.png,NAME-thumb.png etc
-m, –md5 use md5 hash for filename (like del.icio.us)
-d, –datestamp include date in filename
Web page functionality:
–delay=DELAY delay between page load finishing and screenshot
–js=JS JavaScript to execute when the window finishes loading
(example: –js=’document.bgColor=”red”;’)
–no-images don’t load images
–no-js disable JavaScript support
–transparent render output on a transparent background (requires a
web page with a transparent background)
–user-agent=USER_AGENT
set user agent header
“`

## Basic 認証を越えてスクリーンショットをとってみる

– フルサイズのみ
– 横サイズ指定
– 出力ディレクトリ指定
– Basic 認証の user:password 込みの URI でリクエスト

“`prettyprinted
% webkit2png -F -W 1280 -D output http://user:password@www.example.com
“`

## リストファイルから実行

`bash capture.sh` を実行。

“`bash:capture.sh
#!/bin/bash
while read line
do
webkit2png -F -W 1280 -D output –delay=3 ${line}
done <"./output.txt" ``` [/markdown]