圖片抓取教學（二）：「moca-モカ-」檢查元素及檢測元素之應用

「檢查元素」及「檢測元素」分別為Chrome及FireFox瀏覽器內建之控制功能。


使用者可以使用這功能來取得目前網頁上任何物件之資訊，只要在網頁空白處點選「右鍵」→「檢查元素」或「檢測元素」，即可開啟控制區塊。當使用者遇到網站使用這種方式阻擋使用者下載圖片時，皆可使用這方法來下載，絕大多數網站皆適用，以下以「moca-モカ-」這網站做例子。

「moca-モカ-」為一提供日本聲優情報、Report之網站，其文章內常常會提供高解析度之圖片。 而此網站傾向禁止瀏覽者下載、複製及散佈該網站之高解析圖片，瀏覽者無法以常用方法來順利下載圖片。

7月22日（水）リリースの内田彩2ndアルバム「Blooming!」より、ジャケットイメージ・MV・収録内容が公開  

以此文章為例，可以發現裡面有四張圖片，而這四張圖片皆可輕易下載，不過這四張圖片本身皆有超連結，點進去後將會切換至相簿模式，將有更高解析度之圖片。 不過一到相簿模式，這些高解析圖片皆無法直接使用滑鼠左鍵拖曳、右鍵另存圖片這兩種常見圖片抓取方式來下載圖片。

以下將以瀏覽器「Chrome」及「FireFox」做教學。




Chrome

以這張圖片為例：

首先在網頁空白處點選滑鼠「右鍵」→「檢查」可以發現視窗下方多了一欄控制區塊。

接著點選控制區塊上方的「Sources」標籤。左方區塊點選「moca-news.net」→「article 開頭之資料夾」→「image」。最後即可發現這張大圖，即是「001-bq350y.jpg」，可發現中間多出一個區塊，顯示該圖片預覽圖。注意不要直接從該網址抓取圖片，否則只會得到以下圖示：

該網站禁止使用者直接存取圖檔，當使用者對圖片網址進行任何存取時皆會轉址到這個圖片，令使用者無法下載我們想要的圖片。不過使用者可直接下載右方區塊上的預覽圖，直接滑鼠左鍵按住圖片，並拖曳至本機即可下載成功。




FireFox

以這張圖片為例：

首先在網頁空白處點選滑鼠「右鍵」→「檢測元素」可以發現視窗下方多了一欄控制區塊。

接著點選控制區塊上方的「網路」，再點選「圖片」。若出現如上畫面所示一片空白，則再重新整理該頁面。

接著即可發現這張圖片，檔案名稱為「101-dh9z0p.jpg」。對該檔案點選「右鍵」→「另存圖片為」即可直接儲存圖片。注意，如同 Chrome 的下載教學，不要直接從該網址抓取圖片，否則只會被轉址到一個叉叉的圖示。




總結

Chrome 的「檢查」及 FireFox 「檢測元素」的圖片下載方式雖然麻煩，但相當萬用，在絕大多數的網站皆適用，尤其遇到無法輕易下載圖片之網站，此方法就可派上用場。

不過，不管是 Chrome 或是 FireFox，在 moca 或是其他網站上，筆者皆有遇到其中一個瀏覽器無法取得圖片，換另一瀏覽器就成功的狀況，故建議兩種瀏覽器的方式皆可學習，以備不時之需。