express+request實現-圖夫線上爬取網頁圖片

Express Git · 發表 2019-01-22 18:33:42

摘要：先奉上圖夫地址： https://tufu.xkboke.com GIT開源地址： git地址（歡迎star）懶惰驅動Idea 有時候在站酷或者UI中國看到很好的圖片和作品都會想收藏下來學習一下，但是每次右擊另存為都很麻煩，而且有的還要放大後才有原圖可以下載；作為一個偽...

先奉上圖夫地址： https://tufu.xkboke.com

GIT開源地址： git地址（歡迎star）

懶惰驅動Idea

有時候在站酷或者UI中國看到很好的圖片和作品都會想收藏下來學習一下，但是每次右擊另存為都很麻煩，而且有的還要放大後才有原圖可以下載；作為一個偽全棧怎麼能忍呢，然後就想著扒扒他們網站的原始碼看，這一看發現圖片原圖存放的位置都有著規律，這就很高興啦，哈哈!

雛形誕生

浪起來！！很快完成了第一個小指令碼，順利把需要的圖片下載了下來，但只是最簡單的爬取圖片，後來優化了一下，把每次下載的圖片都放到不同資料夾。但是轉頭一想，獨樂樂不如眾樂樂，就想著乾脆把這個指令碼工具化，做一個可以相容多個網站的爬蟲工具，並且可以批量下載原圖，想法很快被付諸實踐，經過不斷的改版後，終於我的圖夫出來了第一版。

迭代優化

一開始只支援站酷和UI中國，而且對其他的網站都相容的不是很好，沒關係，先做出第一版，接著慢慢迭代，後來根據反饋又添加了塗鴉王國，設計癖，視覺ME等網站，最近幾天在逛貼吧，發現貼吧的一些圖片也是很漂亮，有很多可以當桌布的圖片，但是要下到原圖需要三四次步驟，而且一次只能下載一個，所以呢，我又把它加入我的圖夫工具中了，哈哈！我的圖夫又慢慢壯大起來了！先放一張圖展示一下我的圖夫

技術棧

其實原理大家都知道的，就是爬蟲，只是我把爬蟲視覺化做成了一個工具，方便日常使用而已，這裡主要使用的是 express ，庫的話用的是 request , compressing 用來壓縮資料夾, node-uuid 用來生成隨機hash；放一張目錄結構

部分程式碼

index.js 主要請求檔案，其他檔案就移步 git 檢視吧

const path = require('path');
const fs = require('fs');
const analyze = require('./analyze');
const tarTool = require('./tarTool')
const uuid =require('node-uuid')
/**
 * 根據hash值建立資料夾
 * @param path
 */
function write(path) {
fs.exists(path, function (exists) { //path為資料夾路徑
if (!exists) {
fs.mkdir(path, function (err) {
if (err) {
console.log('建立失敗');
return false;
} else {
console.log('建立成功');
}
})
}
})
}
/**
 * 請求圖片地址
 * @param response
 * @param req
 * @param next
 */
function start(req,response,next) {
const hash = uuid.v1().replace(/-/g, "")
const imgDir = path.join(path.resolve(__dirname, '..'), 'output/img/'+hash);
write(imgDir)
// 發起請求獲取 DOM
console.log('請求地址',req.url);
request(req.url, function(err, res, body) {
if (!err && res) {
console.log('start');
// 將 downLoad 函式作為引數傳遞給 analyze 模組的 findImg 方法
analyze.findImg(body,req.type,imgDir,downLoad,req.url);
response.json({head: {code: 0, msg: 'ok'}, data: hash})
}else {
response.json({head: {code: 1000, msg: err}, data: ''})
}
});
}


/**
 * 獲取到 findImg 函式返回的圖片地址後，利用 request 再次發起請求，將資料寫入本地。
 *
 * @param {*} imgUrl
 * @param {*} i
 * @param {*} imgDir
 */
function downLoad(imgUrl, i,imgDir) {
console.log('圖片地址',imgUrl);
let ext = imgUrl.split('.').pop();
// 再次發起請求，寫檔案
request(imgUrl).pipe(fs.createWriteStream(path.join(imgDir, i + '.' + ext), {
'encoding': 'utf8',
}));
}
/**
 * 下載圖片到本地後，利用tar壓縮成一個壓縮包，並返回路徑
 * @param {*} req
 * @param {*} response
 * @param {*} next
 */
function tarFile(req,response,next) {
console.log('接收',req);
tarTool.tarTool(req.path,response)
}
module.exports= {
getImg:start,
tarTool:tarFile
}

使用方法

當然既然是工具，就必須非常簡單啦，你只需複製你要下載頁面的URL連結，然後貼上到我的輸入框中就可以，然後選擇網站型別（當然悄悄告訴你，不選也沒關係，我做了一個校驗），然後就是點選搜尋了，接下來就是耐心的等待...loading....（因為伺服器的頻寬只有1M，所以會下載有點慢，如果你願意打賞一下，我也是不介意的，哈哈），執行完畢後，會出現下載按鈕，你只需要點選下載即可下載打包完畢的檔案了。

已支援網站

站酷
UI中國
塗鴉王國
設計癖
視覺ME
百度貼吧
...(等待你的意見)

宣告

本工具僅作為技術交流工具，不得用於任何商業用途或獲利。本網站不儲存任何圖片，所有內容均通過爬蟲工具爬取網頁上存在的內容。通過本網站下載的任何圖片不代表你擁有商用的權利或者授權，如需授權或商用請聯絡原網站作者或平臺，謝謝理解！

最後，奉上我的開源GIT地址： https://github.com/gengchen52...

圖夫網站地址： https://tufu.xkboke.com

如果喜歡的話，請給個star，如果有什麼想法的話可以提issues，也可以微信聯絡我，歡迎交流，也可在評論中留下你想採集的網站連結，我會不定期更新圖夫完全支援的網站