「教學」利用 Chrome 開發者工具下載 Instagram 照片

拜偉哉臉書公司所賜,今年初 Instagram API 政策大調整,第三方網站無法再透過 API 抓取使用者追蹤者的動態,因此目前要在電腦上看 Instagram 動態只能從官網 instagram.com 上面瀏覽,而網頁版的 UI 莫過於放大的手機 APP,且毫無意外的「鎖右鍵」功能是滴水不漏。

若要「備份」Instagram 的照片,則可以請出 Chrome 開發者工具來幫忙,這個方式是直接將網頁元素拆解開來,隱藏的照片媒體檔案無所遁形,對大部分設計禁止抓圖的網頁應該都有效。

開啟 Chrome 開發者工具

選單位置在「檢視」-「開發人員選項」-「開發者工具」

也可以直接在要抓圖的網頁上按鍵盤快速鍵:

Windows Ctrl + Shift + I
Mac Command + Option + I

開始後畫面應該會是這樣:

使用物件選取工具

使用物件選取工具在照片上方點一下,選擇要抓取的照片:

可以看到右邊開發者工具已經標記所選照片在原始碼中的位置,看似空空如也,因為這是 Instagram 設下的幌子,真正的照片位置在往上三行,前面有 ▶ 符號的 <div> 區塊,點選 ▶ 將其展開:

在新分頁開啟圖片

展開後就可以看到藍色的照片連結,將游標移到連結上方按右鍵,點選「Open Link in New Tab」在新分頁開啟照片,再將圖片另存新檔就大功告成摟!

開啟的照片解析度不高?

在新分頁開啟的照片網址可能會是這樣的結構:

https://instagram.ftpe7-2.fna.fbcdn.net/t51.2885-15/s320x320/sh0.08/e35/13422799_1722816494624138_2109246393_n.jpg

若是使用螢幕較小或是部分特定裝置來開啟網頁,Instagram 為節省流量,可能不會載入最高解析度的版本(原圖)例如上面這張就只是 320x320 解析度的圖片。因此,我們我們將 s320x320 這個字串從網址列中刪除,然後按下 Enter 重新載入。

https://instagram.ftpe7-2.fna.fbcdn.net/t51.2885-15//sh0.08/e35/13422799_1722816494624138_2109246393_n.jpg

載入後可以發現這張圖片的原始解析度是 1080x1080。另外如果上傳的照片是直式或橫式的照片,原始解析度可能更高達 1349x1349,只不過短邊會留白,整張圖還是維持正方形。

comments powered by Disqus