2013年11月26日 星期二

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


不知道大家有沒有遇過一個情境,就是看到一個貼滿照片的網頁,不管是美女圖還是旅行風景照,你都很想將其全部抓下來收藏,但是手動一張一張抓實在是太慢了,所以想用更快的方法。比如說,"下載整個網頁" 是最常見的解法,雖然它會將該網頁的一些 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 一起使用)。

沒有留言:

張貼留言