[技巧] 網頁上快速存圖 (二)：取得下一頁圖片

繼上一篇 [技巧] 網頁上快速存圖 (一)：縮圖變大圖，這次要來教的是更進階的技巧。

當我們在看一串圖的時候，有些時候會被分成好幾頁來觀看，如果分頁少一點還可以接受，但是有些網站分頁實在太多，有時候一整套圖十幾張，一頁就分一張，這要抓圖實在有點難，有些人可能會安裝自動分頁軟體來換頁，然後再利用技巧把圖片放大，這是種解決辦法，但是當分頁軟體沒辦法幫助到你的時候，也只能自力救濟了。

這次應用到的技巧一樣是 Jquery ，如果想要學習 Jquery 可以透過一些速成書籍或是線上教學網站 http://learn.jquery.com/ 來學習，或是看中文版的學習 jQuery 從入門到精通只要兩小時！投影片。

這次的範例網站選了一個圖片很多的完美女人，這網站就是典型的一張圖一張網頁，要抓圖的方式也是非常簡單。

首先先取得下一頁的網址。以範例文章中的網址來看，利用瀏覽器 F12 的開發工具，先針對他的分頁結構下手

<ul class="page" id="pagelist">
	<li><a>共11页: </a></li>
	<li><a href="#">上一页</a></li>
	<li class="thisclass"><a href="#">1</a></li>
	<li><a href="21667_2.html">2</a></li>
	<li><a href="21667_3.html">3</a></li>
	<li><a href="21667_4.html">4</a></li>
	<li><a href="21667_5.html">5</a></li>
	<li><a href="21667_6.html">6</a></li>
	<li><a href="21667_7.html">7</a></li>
	<li><a href="21667_8.html">8</a></li>
	<li><a href="21667_9.html">9</a></li>
	<li><a href="21667_10.html">10</a></li>
	<li><a href="21667_11.html">11</a></li>
	<li><a href="21667_2.html">下一页</a></li>
</ul>

</ul>

想要抓取下一頁的路徑，先要想辦法取得分頁的這個網頁物件，這個範例非常的標準就是，他的分頁有加上 id 因此非常好取得，就是 #pagelist ，接著我們需要建立一個function 來取得下一頁的分頁網址

function findNext(content){
	return $('#pagelist a:last',content).attr('href');
}

function findNext(content){

return $('#pagelist a:last',content).attr('href');

}

就像這樣， findNext(content) ，content 這個變數的用意就是要接收來自不同分頁的內容，取得不同分頁的下一頁，a:last 就是抓該分頁連結的最後一個，最後一個就是下一頁的內容網址。

接著要做的就是取得該分頁的內容，有了分頁的下一頁網址就可以取得下一頁的內容，要做的事情也是非常簡單，就是利用 $.get 來取得

function getPage(url){
	$.get( url , function(r){
		var image = $('.art_con img',content).clone();
		$('.art_con:first').append( image )
	})
}

function getPage(url){

$.get( url , function(r){

var image = $('.art_con img',content).clone();

$('.art_con:first').append( image )

})

}

就像這樣，取得之後立刻新增到該頁裡面，這邊利用 clone() 的函式，可以不用管 img的結構直接加入在網頁中。

接著只要將程式一起套起來就可以嚕，用法很簡單跟之前的做法一樣

// Check if jQuery's loaded
function GM_wait() {
	if(typeof(window.jQuery) == 'undefined') {
	var GM_JQ = document.createElement('script');
	   GM_JQ.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
	   GM_JQ.type = 'text/javascript';
	   document.getElementsByTagName('head')[0].appendChild(GM_JQ);
	   window.setTimeout(GM_wait,100); }
	else { 
		$ = window.jQuery;
		letsJQuery();
	}
}
GM_wait();

function letsJQuery() {
	getPage( findNext( $('body') ) )
}
function getPage(url){
	$.get( url , function(content){
		var image = $('.art_con img',content).clone();
		$('.art_con:first').append( image )
		var page = findNext(content);
		if( page && page != '#'){
			getPage(page)
		}
	})
}
function findNext(content){
	return $('#pagelist a:last',content).attr('href');
}

// Check if jQuery's loaded

function GM_wait() {

if(typeof(window.jQuery) == 'undefined') {

var GM_JQ = document.createElement('script');

GM_JQ.src = 'http://code.jquery.com/jquery-1.9.1.min.js';

GM_JQ.type = 'text/javascript';

document.getElementsByTagName('head')[0].appendChild(GM_JQ);

window.setTimeout(GM_wait,100); }

else {

$ = window.jQuery;

letsJQuery();

}

GM_wait();

function letsJQuery() {

getPage( findNext( $('body') ) )

}

function getPage(url){

$.get( url , function(content){

var image = $('.art_con img',content).clone();

$('.art_con:first').append( image )

var page = findNext(content);

if( page && page != '#'){

getPage(page)

}

})

}

function findNext(content){

return $('#pagelist a:last',content).attr('href');

}

要把程式串起來讓他可以持續的抓下一頁的內容，只需要在 getPage 裡面加一小段，並且判斷他是不是已經到了最後一頁，每個網頁的判斷方式都不同，這個範例網站中的最後一頁就是網址連結最後方會是一個 # ，所以只要最後一個連結是 # 程式就會停止了。

要讓程式開始只需要在一開始的時候把本頁下一頁載入給 getPage 就可以了。

這樣一樣在 Chrome 裡面使用 Console 貼上上面的Code 就可以一次取得所有的圖片嚕。

二月 2019
一	二	三	四	五	六	日
« 一月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28

[技巧] 網頁上快速存圖 (二)：取得下一頁圖片

相關