怎么使用Node.js開發(fā)一個(gè)簡(jiǎn)單圖片爬取功能

這篇文章主要介紹“怎么使用Node.js開發(fā)一個(gè)簡(jiǎn)單圖片爬取功能”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“怎么使用Node.js開發(fā)一個(gè)簡(jiǎn)單圖片爬取功能”文章能幫助大家解決問題。

正文

node-crawler 是一個(gè)輕量級(jí)的 node.js 爬蟲工具，兼顧了高效與便利性，支持分布式爬蟲系統(tǒng)，支持硬編碼，支持http前級(jí)代理。而且，它完全是由 nodejs 寫成，天生支持非阻塞異步IO，為爬蟲的流水線作業(yè)機(jī)制提供了極大便利。同時(shí)支持對(duì) DOM 的快速選擇（可以使用 jQuery 語(yǔ)法），對(duì)于抓取網(wǎng)頁(yè)的特定部分的任務(wù)可以說是殺手級(jí)功能，無(wú)需再手寫正則表達(dá)式，提高爬蟲開發(fā)效率。

安裝引入

我們先新建一個(gè)項(xiàng)目，在里面創(chuàng)建index.js作為入口文件。

然后進(jìn)行爬蟲庫(kù)  node-crawler 的安裝。

# PNPM
pnpm add crawler
# NPM
npm i -S crawler
# Yarn 
yarn add crawler

然后用過 require 引入進(jìn)去。

// index.js
const Crawler = require("crawler");

創(chuàng)建實(shí)例

// index.js
let crawler = new Crawler({
    timeout:10000,
    jQuery:true,
})
function getImages(uri) {
    crawler.queue({
        uri,
        callback: (err, res, done) => {
            if (err) throw err;
        }
    })
}

從現(xiàn)在我們將開始寫一個(gè)拿到html頁(yè)面的圖片的方法，crawler 實(shí)例化后，在其隊(duì)列中主要是為了寫入鏈接和回調(diào)方法。在每個(gè)請(qǐng)求處理完畢后將調(diào)這個(gè)回調(diào)函數(shù)。

這里還要說明一下， Crawler  使用了 request 庫(kù)，所以 Crawler 可供配置的參數(shù)列表是 request 庫(kù)的參數(shù)的超集，即 request 庫(kù)中所有的配置在 Crawler 中均適用。

元素捕獲

剛才或許你也看到了 jQuery 這個(gè)參數(shù)，你猜的沒錯(cuò)，它可以使用  jQuery  的語(yǔ)法去捕獲 DOM 元素的。

// index.js
let data = []
function getImages(uri) {
    crawler.queue({
        uri,
        callback: (err, res, done) => {
            if (err) throw err;
            let $ = res.$;
            try {
                let $imgs = $("img");
                Object.keys($imgs).forEach(index => {
                    let img = $imgs[index];
                    const { type, name, attribs = {} } = img;
                    let src = attribs.src || "";
                    if (type === "tag" && src && !data.includes(src)) {
                        let fileSrc = src.startsWith('http') ? src : `https:${src}`
                        let fileName = src.split("/")[src.split("/").length-1]
                        downloadFile(fileSrc, fileName) // 下載圖片的方法
                        data.push(src)
                    }
                });
            } catch (e) {
                console.error(e);
                done()
            }
            done();
        }
    })
}

可以看到剛才通過 $ 來(lái)完成對(duì)請(qǐng)求中 img 標(biāo)簽的捕獲。然后我們下面的邏輯去處理補(bǔ)全圖片的鏈接和剝離出名字為了后面可以保存取名用。這里還定義了一個(gè)數(shù)組，它的目的是保存已經(jīng)捕獲到的圖片地址，如果下次捕獲發(fā)現(xiàn)同一個(gè)圖片地址，那么就不再重復(fù)處理下載了。

以下是掘金首頁(yè)html用 $("img") 捕獲到的信息打印：

下載圖片

下載之前我們還要安裝一個(gè) nodejs 包—— axios ，是的你沒看錯(cuò)，axios 不僅提供給前端，它也可以給后端去使用。但是因?yàn)橄螺d圖片要把它處理成數(shù)據(jù)流，所以把 responseType 設(shè)置成 stream 。然后才可以用 pipe 方法保存數(shù)據(jù)流文件。

const { default: axios } = require("axios");
const fs = require('fs');

async function downloadFile(uri, name) {
    let dir = "./imgs"
    if (!fs.existsSync(dir)) {
        await fs.mkdirSync(dir)
    }
    let filePath = `${dir}/${name}`
    let res = await axios({
        url: uri,
        responseType: 'stream'
    })
    let ws = fs.createWriteStream(filePath)
    res.data.pipe(ws)
    res.data.on("close",()=>{
        ws.close();
    })
}

因?yàn)榭赡軋D片很多，所以要統(tǒng)一放在一個(gè)文件夾下，就要判斷有沒有這個(gè)文件夾如果沒有就創(chuàng)建一個(gè)。然后通過 createWriteStream 方法來(lái)把獲取到的數(shù)據(jù)流以文件的形式保存到文件夾里面。

然后我們可以嘗試一下，比如我們捕獲用一下掘金首頁(yè)html下的圖片：

// index.js
getImages("https://juejin.cn/")

執(zhí)行后發(fā)現(xiàn)就可以發(fā)現(xiàn)已經(jīng)捕獲到靜態(tài)html里面的所有圖片了。

node index.js

關(guān)于“怎么使用Node.js開發(fā)一個(gè)簡(jiǎn)單圖片爬取功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。