[技巧] 網頁上快速存圖 (一):縮圖變大圖

不少人都有存圖的習慣,我自己也有,通常呢我都用右鍵快速的把圖片存下來,但是當你想存的圖片很多該怎麼辦呢,我的方法是使用 [教學] 如何把文章中的連結變成圖片直接看 這個技巧把圖片給變成大圖,當圖片變成大圖的時候,只需要按下 CTRL+S 也就是 選單裡面的 檔案→存檔,把網頁帶圖片一次給存下來,整張網頁中的檔案就在裡面了

這時候桌面上會有兩個檔案,以 [開箱] V-MODA Crossfade M-80 專業低音耳機 這篇文章來說,如果你想全部把圖片存下來,只需要 利用我的 教學 把連結圖片一次變成大圖片,等圖片載入完畢之後,存檔的資料夾上就會出現兩個檔案

  • [開箱] V-MODA Crossfade M-80 專業低音耳機   Mesak Blog_files
  • [開箱] V-MODA Crossfade M-80 專業低音耳機   Mesak Blog.htm

通常呢,存圖片是不需要存文字的,這時候只需要點入檔名帶有_files 的資料夾,把你需要的圖片抓出來,移動到另一個資料夾下就好了,這時候只需要刪除網頁 OR 資料夾,兩個文件就會刪除了。

當然今天不是講解這麼簡單的東西,在大陸站以及國外的網站,常常會有許多好圖片或是文章,需要一直點選下一頁,每次都要點很煩,針對這種網頁,我們並沒有太多時間一張一張點開來下載,也許你會想說,我只需要一次點開分頁在一張一張圖網頁存取就好啦,是,通常的狀況是這樣,除非你真的很有毅力,大部分人 存 10 頁左右就疲乏了,如果超過 50 頁,那真的要人命。

該怎麼解決呢? 我建議先去學習一下 jQuery ,別以為程式很恐怖,jQuery 是一個非常易懂好學的 框架程式,他把 javascript 的複雜寫法都簡化了,而當你抓圖的時候,只需要圖片的位置,圖片的檔案,以及字串的取代,幾乎一切就可以解決了。你不需要完整的了解 jQuery 整套,只需要會點皮毛就可以了,如果你有興趣 可以參考一下 學習 jQuery 從入門到精通只要兩小時! 的文章

=====分隔線=====

好啦,來進入一下 一般抓取課程

縮圖變大圖

首先,多數的網站會把縮圖放在第一張,點進去的時候放大圖,而大多數的網站,大圖與縮圖的路徑是相差無幾的,來個範例網站 Pixnet:相簿列表 » 【女生短髮型】

一進入相片列表,可以看見相片的列表,這些圖片都是縮圖,好了,我現在要限定一下瀏覽器,請使用 Chrome 按下 F12 (如果是 Firefox 請先安裝 Firebug )

按下 F12 之後,請點選 左上角的 Elements,接著就會看到一堆 程式碼,千萬不要看到程式碼就頭痛,接著按下下方的放大鏡,此時滑鼠就會變成選擇網頁上的物件功能

請選擇第一張圖片。

接著會看到下方的程式碼,會自動對應到第一張圖片的物件是什麼程式碼產生的

然後在這個物件上按下右鍵,接著按下 Copy link address 複製這個圖片的連結,接著直接點進去該張圖片

點近來該張圖片之後,一樣的步驟,按 F12 放大鏡,得到該張圖片的連結。

好了,現在我們有兩張圖片的連結了

  • http://pic.pimg.tw/benson710826/1359779369-1840631878_s.jpg
  • http://pic.pimg.tw/benson710826/1359779369-1840631878.jpg

在這兩張圖片之中有看出什麼端倪嗎?

恩~就是 縮圖的連結,多了 _s 這個網址,也就是說,如果想要取得原始圖檔,只需要把 _s 去掉,就可以得到原圖的連結嚕。

接著回到相片列表,我們利用 jQuery 撰寫一段很簡單的程式碼,如果完全不考慮其他連結的問題,只接抓取 img 的標籤,取得所有圖片的連結 將 _s 通通去掉就好了

寫法如下

這段程式碼非常簡單,就是把 所有的 圖片連結丟入一個變數,這個變數就是一個字串,然後把字串裡面有 _s 這個字,全部去掉。

那麼要怎麼放入網頁中去執行呢?

把程式碼塞入  letsJQuery 這個函式之中就可以了

接著一樣按下 F12 ,然後選擇 Console

如果可以的話,按一下 禁止的圖案,把錯誤訊息給清空

這時候滑鼠點一下 > 符號,會有輸入游標,直接把程式碼貼上去按下 ENTER 就可以了

這時候稍微等待一下,圖片正在抓取,如果想確認圖片到底放大了沒,很簡單,只需要圖片按下右鍵,複製影像網址,就可以確認 圖片是不是已經變大圖了。

有時候我們不需要這麼多奇怪的樣式,或是一些小圖片,這時候 按一下 F12,點選 Elements ,正常來說 Chrome 第一次 F12 都是把選取放在 <body> 這個標籤上,這時候點一下 <head> ,直接不要客氣按下 delete 直接把整個網頁的程式碼給取消掉,這時候你可以看到整個網頁無樣式的樣子,非常好抓取。

不過 Pixnet 這個相簿,每個縮圖還有限制大小,這時候只需要加一小段程式碼把 寬跟高的限制給解除掉

這樣圖片大小限制就解除嚕,如果你要全部抓圖這個步驟可以省略

我是米薩克,想了解更多可以點選  關於我