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

by Mesak

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

You may also like