將 HTML 轉成圖檔 & PDF 的工具: wkhtmltoimage, wkhtmltopdf | brooky's blog

最近手上的一個 project, 需要用程式把一個網頁 HTML 轉成 image

這個功能聽起來蠻簡單的，但仔細一想，如果真的有這樣的程式，那它幾乎也做掉了browser rendering 的功能，所以我原本也不抱太大的期望，沒想到在網路上 google 了一下，很快就發現了 wkhtmltoimage 這個好用的 tool 。我試用了一下，感覺效果蠻好的。請參考下圖

使用 wkhtml2image 截取 google 首頁

使用 wkhtml2image 截取 yahoo首頁

wkhtmltoimage 還有一個姐妹作 wkhtmltopdf，是可以把 HTML 轉成 PDF，也非常地好用。wkhtmltoimage, wkhtmltopdf 這兩個工具，背後其實是用了 QT 4.4 裡面的一個 WebKit widget (如果你不熟悉 WebKit 的話，WebKit 是 Safari 瀏覽器背後所使用的 rendering engine, 也用在 Android Web browser），所以甚至連 javascript 語法都可以正常地解讀。

note:  wkhtmltoimage預設的 quality 蠻高的，所以出來的  image size 有點大，可以透過 “–quality” 這個參數去設定，或是使用 ImageOptim 這種圖片最佳化的程式再調整一下)

安裝

先到http://code.google.com/p/wkhtmltopdf/downloads/list 去下載，目前提供不同的作業系統，包括：Mac OS, Linux, Windows。

Usage:

• convert a remote HTML file to PDF

  wkhtmltopdf www.myhomepage.com myhomepage.pdf

• convert a remote HTML file to image

  wkhtmltoimage http://www.google.com google.png
  wkhtmltoimage http://tw.yahoo.com yahoo.png

Advanced Usage:

• convert image 同時指定長跟寬 (limit page size)

  wkhtmltoimage –width 1024 –height 768 http://tw.news.yahoo.com/ yahoo_news.png

• convert PDF to image 同時指定長跟寬 (limit page size)

  wkhtmltopdf –page-height 300 –page-width 300

• 自動利用 <h1> <h2> … 產生目錄 (generate table of contents)

  wkhtmltopdf toc http://doc./4.6/qstring.html qstring.pdf

• 轉換本機的 HTML file (Convert a local HTML file to PDF)

  wkhtmltopdf my.html my.pdf

• 將 HTML 轉成 PS 格式 (Convert HTML to ps file)

  wkhtmltopdf my.html my.ps

Resource

• wkhtmltopdf menual:

  http://madalgo./~jakobt/wkhtmltoxdoc/wkhtmltopdf_0.10.0_rc2-doc.html

• A list of available options:
  wkhtmltopdf –help
• wkhtmltopdf:

  http://code.google.com/p/wkhtmltopdf/

• wkhtmltoimage

  http://madalgo./~jakobt/wkhtmltoxdoc/wkhtmltoimage_0.10.0_rc2-doc.html