抓圖王 -- 把網頁中的圖片一網打盡

不知道大家有沒有遇過一個情境，就是看到一個貼滿照片的網頁，不管是美女圖還是旅行風景照，你都很想將其全部抓下來收藏，但是手動一張一張抓實在是太慢了，所以想用更快的方法。比如說，"下載整個網頁" 是最常見的解法，雖然它會將該網頁的一些 css 等大大小小的怪文檔一起下載下來，但抓圖的目的還是達得到。可是，若你跟我一樣是 Safari 的愛用者，應該知道 Safari 不支援這個功能 ....

嗯，如上圖，儲存網頁的方式只有兩種，一種是 "網頁原始檔"，也就是 html 純文字檔；另一種是 "網頁封存檔"，可以將網頁完整地下載下來，但它是一個打包的 webarchive 檔，除非使用 Web Archive Extractor，不然無法取得裏面的圖片。然而，webarchive 檔日前被開發者 Joe Vennix 爆出安全性漏洞，故我並不建議大家把網頁轉換成 webarchive 檔來保存。

所以該怎麼做呢？這次就來跟大家介紹一個 Automator 的小技巧，我取名為 "抓圖王"，作法如下：

1. 開啟 Automator，選擇 "服務"。
2. 設定以下參數：

1. 服務接收所選的：URL
2. 位置：Ssfari (選 "任何應用程式" 也可以，如此一來只要是 Cocoa 程式內的 URL 連結都支援這個 Automator 服務)。
3. 在左側的 "Internet" 選單中，依序選擇 "取得網頁的影像 URL" 及 "下載 URL"，並拖放到右側的工作流程中 (如上圖)。
4. 在 "下載 URL" 的下緣點選 "選項"，並勾選 "工作流程執行時顯示此動作"，如此一來每次執行時都可以自由選擇下載儲存的位置。

3. 至 "檔案" 選單中點選 "儲存" 以儲存這個 Automator 服務，可隨意命名，系統預設會將 "服務" 儲存在 ~/Library/Services 裡。若點選 "輸出" 將檔案另存到別的目錄下，也可以日後再雙擊該檔去安裝，如下圖 (請注意 10.6 沒有下圖的 "服務安裝程式"，故 10.6 的用戶需自行將檔案移至 ~/Library/Services)。

那要如何使用呢？只要在 URL 上按滑鼠右鍵，選擇你新增的服務即可 ....

之後此服務就會開始分析該網站內的圖片連結，分析時間的長短因網站內容多寡而異，當你看到右上角有個齒輪在轉動就表示 Automator 仍在運作中，如右圖。

然後，如同先前所說，待分析完後，Automator 會跳出一個視窗，問使用者想將檔案儲存在哪兒，在下拉式選單中選好欲儲存的目錄，按下確定之後就大功告成了。

最後，有幾件事想提醒大家：

1. "抓圖王" 是以分析網頁內圖片連結的方式去抓圖，好處是抓到的圖檔是連結中的原始圖檔而不是網頁內的縮圖，但如果網頁內的照片是從其他網路相簿外連而來，就不見得能成功。我試過不少網站，目前尚未找到成功與否的規律性，比如說開頭的邵庭女神網頁就有外連 pixnet 相簿，但可以成功抓圖，奇怪的是搜星網也是外連 pixnet 相簿，但卻會失敗 (我已經測試過中文網址是否造成影響，實驗結果是不會)。
2. 如果只是要抓下網頁內的快取圖檔，可以如下圖般設定，但成功與否也得自己試過才知道。不過我覺得如果要抓快取，乾脆安裝 Firefox 去下載整個網頁比較快，也幾乎不會失敗 (順道一提，Firefox 就是標準的非 Cocoa 程式，不支援 Automator 服務)。

1. 如果下載的圖片網具有某些規律性，可以將 "過濾 URL" 的工作流程安插在 "取得網頁的影像 URL" 及 "下載 URL" 之間，如下圖。不過就我的看法是，Automator 服務的訴求就是簡單快速，每次都要去設定過濾條件實在有點煩，而且 "過濾 URL" 有個奇怪的 bug，就是你一定要設定某個過濾條件，無法迴避，如果不輸入任何條件，後續的下載就會失敗。

1. 如果只是要抓一兩張照片，但卻被該網站的某些防護機制所阻擋 (像是 Javascript)，除了將該瀏覽器的 Javascript 支援關閉之外，還可以使用 GetPic bookmarklet，將網站內的圖片全部顯示出來，此時網站內的防護機制都會失效。對了，照慣例服務一下無法取得 Javascript 超連結的 iOS 用戶：

javascript:n='';for(i=0;i%3Cdocument.images.length;i++)%7Bn+='%3Cimg%20src='+document.images%5Bi%5D.src+'%3E%20'+document.images%5Bi%5D.width+'x'+document.images%5Bi%5D.height+'%3Cbr%3E%3Cbr%3E'%7D;if(n!='')%7Bdocument.write('%3Cp%20style=font-size:11px;font-family:verdana,sans;%3E'+n+'%3C/p%3E');void(document.close())%7Delse%7Balert('i%20see%20no%20images')%7D

1. 最後，跟大家提示一下 "抓圖王" 的延伸應用 -- 如果在設定工作流程時，將 "取得網頁的影像 URL" 換成 "取得網頁中的連結 URL"，那就什麼都可以抓囉 .... 當你連上某檔案伺服器的時候就知道有多方便了 (此時也可搭配 "過濾" URL 一起使用)。