[技巧] 網頁上快速存圖 (三)：放大 Google 圖片

先前教學的一篇 [技巧] 網頁上快速存圖 (一)：縮圖變大圖 針對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 之後就可以看到大圖了，至於為什麼會樣式全部跑掉，這是因為最尾段加上兩個 移除標籤的函式，這樣一來想要移除樣式儲存圖片就方便多了唷。