大家好我是曲靈風请垛，前段時間一直在網(wǎng)上找電影看宗收，直到朋友推薦了一個挺不錯的電影網(wǎng)站亚兄，用了一下审胚，哎呦，還真不錯洽洁，網(wǎng)站的排版懒鉴，分類，壁紙是真的可以(有點跑偏璃俗，快成了介紹電影網(wǎng)站的博客了悉默，那就拉回來)抄课。那時一想如果把這些電影圖片撈出來，組成一個形狀是不是特有意思的间聊？這個還真不清楚哎榴，既然不清楚，那就先試試迎变。
最后試了一下飘言，沒成想還可以姿鸿，做了一個可以定制特定海報的東東般妙，在命令行中輸入下面的命令(代碼的執(zhí)行需要Node環(huán)境的，假設你的Node環(huán)境已經(jīng)裝好)碟渺，就會生成一張組合圖像(如下圖theLastOne.jpg)
node index.js 10 7 10
theLastOne.jpg
接下來依據(jù)代碼分析一下的實現(xiàn)邏輯苫拍。
各位看官绒极，要想實現(xiàn)上面圖像的組合，實現(xiàn)兩個功能就行：
- 實現(xiàn)爬蟲程序榔袋，把圖片從網(wǎng)頁中撈出來凰兑，保存到本地审丘。
- 通過某種特定算法滩报，把圖片重新組合，最后生成一張?zhí)囟▓D片售睹。
這里主要的邏輯是在第二步,爬蟲程序簡單說一下。
const request = require('request');
const cheerio = require('cheerio');
const fs = require('fs');
const path = require('path');
const async = require('async');
const arrange = require('./arrange');
const log4js = require('log4js').getLogger("begin crawler");
let loveURL = "http://dianying.fm/search/?genre=%E7%88%B1%E6%83%85&p=";
// 根據(jù)圖片url下載圖片
let download = function (uri, filename, cb) {
request.head(uri, function (err, res, body) {
request(uri, {
sendImmediately: false
}).pipe(fs.createWriteStream(filename)).on('close', cb);
});
};
// 從拉取的html中把src取出來
let getSrc = function (body) {
let $ = cheerio.load(body);
let list = [];
$('ul[class="fm-result-list"]').find('li > div > a > img').each(function (index, element) {
list.push($(element).attr('src'));
})
return list;
}
// 獲取`爬蟲爬取的圖片在本地的保存位置`可训。
let getPosterPath = function (src) {
let postersDir = path.join(__dirname, 'source');
let fileName = src.split('/')[src.split('/').length - 1].split('-')[0];
let posterPath = path.join(postersDir, fileName);
return posterPath;
}
let begin = () => {
let downLoads = 0;
if (!process.argv[2] && !process.argv[3] && !process.argv[4]) {
log4js.warn(`請從命令行中輸入頁數(shù),寬度, 高度 forExample: node dingying.js 3 4 5 `);
process.exit(0);
}
let pages = process.argv[2];
let loop = new Array(parseInt(pages)); //設置要循環(huán)的次數(shù);
async.eachOfLimit(loop, 2, (page, index, cbPage) => {
request(loveURL + (index + 1), function (error, response, body) {
let list = getSrc(body);
async.eachSeries(list, (src, cbSrc) => {
log4js.info(src, "start ...");
let posterPath = getPosterPath(src)
download(src, posterPath, function (err) {
if (err) log4js.error(err);
downLoads++;
return cbSrc();
});
}, (err) => {
return cbPage();
});
});
}, (err) => {
log4js.info("downLoads url total: ", downLoads);
arrange.arrange(process.argv[3], process.argv[4], (err, info) => {
if (err) console.error(err, info);
setTimeout(function () {
log4js.info("finish: success");
process.exit();
}, 2000);
});
});
}
begin();
- 開始幾行是通過requrie()引進依賴庫昌妹。
- 定義變量
loveURL生真，這個url其實就是網(wǎng)頁的URL，通過網(wǎng)頁的URL獲取圖片地址捺宗。 - download()方法根據(jù)src下載圖片，最后通過可寫流寫入相應文件中川蒙。其中
pipe是管道蚜厉，它的流向是從可讀流到可寫流，.on('close', cb)是綁定close函數(shù)昼牛，寫入成功之后，調用回調函數(shù)康聂。 - getSrc()是爬蟲的主要邏輯贰健，其中主要是
cheerio模塊的使用，這里有小例子可以幫助理解cheerio是如何在網(wǎng)頁中撈元素的恬汁。 - getPosterPath是獲取圖片在本地的保存位置伶椿。
- begin()是程序的入口函數(shù)，在
arrange.arrange函數(shù)調用之前都是爬蟲程序氓侧，是通過node index.js 10 7 10這個命令行中的第一個10來確定把10個html(其中每個html網(wǎng)頁是15張圖片脊另，總共150張圖片)網(wǎng)頁撈到本地來，然后異步方式下載圖片约巷，保存到本地目錄偎痛。
接下來看一下arrange.arrange函數(shù)的實現(xiàn)邏輯，也就是第二個功能的實現(xiàn)独郎。
const gm = require('gm');
const fs = require('fs');
const _ = require('lodash');
const async = require('async');
const rimraf = require('rimraf');
let source = fs.readdirSync('./source');
exports.arrange = (width, height, cb) => {
//先清空`destination`目錄
rimraf('./destination/*', function () {
let groups = _.chunk(source, width); //width是寬度, groups.length是實際的高度
let formatGroups = groups.slice(0, height);
async.eachOfLimit(formatGroups, 2, (group, index, cbGroup) => {
var gmstate = gm('./source/' + group[0]);
for (let j = 1; j < group.length; j++) {
gmstate.append('./source/' + group[j], true);
}
gmstate.write('./destination/' + (index + 10000) + ".jpg", function (err) {
if (err) {
console.dir(arguments);
return cb(err);
}
console.log(this.outname + " created :: " + arguments[3])
return cbGroup();
});
}, (err) => {
setTimeout(function () {
let integrations = fs.readdirSync('./destination');
let gmstateDes = gm('./destination/' + integrations[0]);
for (let i = 1; i < integrations.length; i++) {
gmstateDes.append('./destination/' + integrations[i]);
}
gmstateDes.write('./destination/' + "theLastOne.jpg", function (err) {
if (err) {
console.dir(arguments);
return cb(err);
}
console.log(this.outname + " created :: " + arguments[3]);
return cb(null, 'finish');
});
}, 2000);
});
});
}
- 引進依賴庫踩麦。
- 函數(shù)
exports.arrange(width, height, cb)的作用是通過指定寬度，高度生成特定大小的圖片氓癌。- 清空
destination目錄谓谦，目的是保證每次組合圖片的準確性。 - 根據(jù)新圖片寬度進行分組顽铸，獲取
groups變量茁计。 - 如果變量
height大于groups長度，取height作為目標圖片的高度谓松，否則取groups長度作為目標圖片的高度,這是formatGroups變量的作用星压。 - 組合圖片
- gmstate.append()函數(shù)的第二個參數(shù)默認是false，標明是從上到下組合圖片鬼譬，true是從左到右組合圖片娜膘。
- 先把formatGroups中的圖片從左到右進行組合，這是
gmstate變量的作用优质，每組組合后竣贪，寫入到相應文件中军洼。 - 因為這里有多次磁盤讀寫操作，即使是異步執(zhí)行演怎，磁盤更新也不會太及時匕争，因此需要
setTimeout()來使程序執(zhí)行放慢速度。 - 最后把生成的圖片上下組合(
gmstateDes變量的作用)爷耀，就可得到想要的圖片甘桑。
- 清空
最后再來測試一下，執(zhí)行node index.js 1 3 4歹叮，命令行的參數(shù)的意思是說需要拉取1個網(wǎng)頁跑杭，其中新圖片長度是3，高度是4咆耿，看一下newOne.jpg的大小德谅，bingo搞定!!!
newOne.jpg
以上的圖片都是愛情片的海報，快七夕了萨螺，應應景可好窄做？
如果想要拉取其他類型的圖片，改一下loveURL就好屑迂。
老規(guī)矩最后來一個老郭的定場詩浸策。
大將生來膽氣豪 腰橫秋水雁翎刀
風吹鼉鼓山河動 電閃旌旗日月高
天上麒麟原有種 穴中螻蟻豈能逃
太平待詔歸來日 朕與將軍解戰(zhàn)袍
