利用 Puppeteer 抓出網站裡的驗證碼圖片
Aug 23, 2017 · 3 min read

意外也不意外的,前陣子做的 排雲山莊申請工具 成為我做過的 side project 中使用度和互動度最高的,也因此有了比較強的動力進行進一步的開發 XD。於是,最近開始著手研究 國家公園入園申請系統 是否也有辦法透過自動化工具來減輕申請時的負擔[1]。

驗證碼,是國家公園入園申請系統中比較特別的部分,對自動化工具來說,它也是個比較難處理的東西,因此在這裡我們可以有兩種處理的選項:
- 幫使用者自動判斷出驗證碼圖片中的驗證碼,並填入申請單。
- 幫使用者自動抓出驗證碼圖片,讓使用者自行輸入驗證碼。

這裡我選擇使用 Puppeteer 來做出 2 的功能。
Puppeteer 是 Google Chrome 團隊 open source 出來的一個 Headless Chrome Node API,做得非常 high-level,非常適合用它來做 crawler。
安裝和執行方式就不在這裡說了,下面直接貼上能爬出國家公園入園申請系統中驗證碼照片的程式。值得一提的是有兩點:
- Puppeteer 的操作都能用 async / await 來進行,超級方便。
- 很喜歡 page.evaluate() 這個 function,因為可以在裡面做到 API 沒有提供的任何 DOM 操作,例如去抓取驗證碼圖片的位置和大小。

程式執行成功後,就會產生出一張驗證碼的 png 照片啦!
[1]: 玉山國家公園的入園申請 除了玉山線以外的部分,目前其實是和雪霸、太魯閣一樣,統一在 國家公園入園申請系統 上進行申請的,不過根據公告,玉山線的部分也即將在明年被整合進國家公園的系統了。

