先前教學的一篇 [技巧] 網頁上快速存圖 (一):縮圖變大圖 針對Google 的圖片是沒有效果的,為什麼呢?
首先要來分析一下 Google的存圖結構,我們就以 這篇文章 來做示範
首先第一個步驟就是複製 第一張圖片的圖片網址
https://lh5.googleusercontent.com/-F5m6QkmAdUk/UpwqkTUPjcI/AAAAAAAAhrQ/MfVRC7VNoSE/s640/…..
網址可能很長,如果一時之間比較不出來的話,可以直接點進去看相簿的大小,進入相片之後一樣複製相片的圖片網址
https://lh5.googleusercontent.com/-F5m6QkmAdUk/UpwqkTUPjcI/AAAAAAAAhrQ/MfVRC7VNoSE/s1024/….
把兩個網址一比對之後可以發現
lh5.googleusercontent.com/-F5m6QkmAdUk/UpwqkTUPjcI/AAAAAAAAhrQ/MfVRC7VNoSE/s640/
lh5.googleusercontent.com/-F5m6QkmAdUk/UpwqkTUPjcI/AAAAAAAAhrQ/MfVRC7VNoSE/s1024/
最尾段的 s640 變成 s1024 了由此可以推論是由這段數字來控制圖片的大小
因此要應用在 google 類型的圖片網站,首先就是要抓到這串數字,接下來寫了一段代碼,可以直接取代,就不用費功夫在一個一個找取代嚕。
var img = document.querySelectorAll('img'); for(x in img ) { var oImage = img[x]; if( typeof(oImage.nodeName) == 'string' && oImage.nodeName.toUpperCase() == 'IMG') { var src = oImage.src,tmp = src.match(/googleusercontent.com(\/[\w-]+){5}/); if( isArray(tmp)){ src = src.replace(tmp[1],'/s3200'); oImage.src = src; oImage.removeAttribute("width"); oImage.removeAttribute("height"); } } } function isArray(object) { return ('isArray' in Array) ? Array.isArray(object) : function (value) { return Object.prototype.toString.call(value) === '[object Array]'; } } removeTag('link'); removeTag('style'); function removeTag(tagName){ var element = document.getElementsByTagName(tagName); for (index = element.length - 1; index >= 0; index--) { element[index].parentNode.removeChild(element[index]); } }
這段程式碼放置的地方與[技巧] 網頁上快速存圖 (一):縮圖變大圖 這篇放置的位置一樣
只需要複製貼上按下 Enter 之後就可以看到大圖了,至於為什麼會樣式全部跑掉,這是因為最尾段加上兩個 移除標籤的函式,這樣一來想要移除樣式儲存圖片就方便多了唷。