基于Electon的圖片采集工具是怎樣的，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

目前創(chuàng)新互聯(lián)建站已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、武義網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

工具的界面是這樣的，上面是一些導(dǎo)出數(shù)據(jù)，提交到服務(wù)器的操作，還有輸入U(xiǎn)RL的輸入框，下面主要是爬取結(jié)果的呈現(xiàn)區(qū)域。

技術(shù)架構(gòu)：

Electron＋Nodejs

1 

實(shí)現(xiàn)思路：

1.1 監(jiān)聽webview事件，注入js代碼

利用electron的webContents，監(jiān)聽需要獲取圖片的網(wǎng)頁，當(dāng)網(wǎng)頁加載完成，促發(fā)‘dom-ready’事件，然后在網(wǎng)頁中注入JS代碼。

主要用了這個(gè)api：

webContents.executeJavaScript(code[,userGesture,callback])

如：

win.webContents.on('dom-ready', () => {

 win.webContents.executeJavaScript(code[,userGesture,callback])

})；

1.2 遍歷HTML中的圖片URL

這里要注意，有很多網(wǎng)站把圖片寫到了background-image里，而不是用img標(biāo)簽。所以得2者結(jié)合。

獲取所有img標(biāo)簽的圖片：

body.images

獲取background-image的圖片，這個(gè)需要用到window.getComputedStyle，通過css屬性來獲取。

window.getComputedStyle("元素", "偽類");

var dom = document.getElementById("test"),
   style = window.getComputedStyle(dom , ":after");

1.3 返回獲取的結(jié)果

electron往webview中注入的代碼可以通過return返回，

也可以通過在注入代碼中寫入：

electron.remote.getGlobal(‘webWin').webContents.send('autoChat',res);

在渲染進(jìn)程中，通過：

electron.ipcRenderer.on('autoChat',(e,result)=>{
 console.log(result,'ipc');
});

接收結(jié)果。

2 

一些經(jīng)驗(yàn)心得：

2.1 ES6的模板字符串template strings

electron 支持ES6,ES6引入了一種新型的字符串字面量語法，我們稱之為模板字符串。

var code=``;

除了使用反撇號(hào)字符 ` 代替普通字符串的引號(hào) ' 或 " 外，它們看起來與普通字符串并無二致。在最簡單的情況下，它們與普通字符串的表現(xiàn)一致：

var code=" var dom=document.get......  "

與普通字符串不同的是，模板字符串可以多行書寫：

var code=`
var dom=document......
function getURL(){
let v=.....
} 
`;

非常適合寫注入的js代碼哈～

2.2 electron的加密

由于electron打包后的程序都是直接暴露源代碼的，就在resources文件夾里的app文件夾。

我們可以借助asar，加密我們的源代碼

全局安裝：

npm install -g asar

把resources里的app文件夾打包為app.asar

asar pack ./app app.asar

發(fā)現(xiàn)個(gè)坑，通過asar加密后的node_modules中有些庫引用不了，所以我調(diào)整了下打包方式，把node_modules跟我的代碼分開存放，比如

./js/
./page/index.html
./css/
./main.js
./node_modules/

./app/spider/js/
./app/spider/css/
./app/spider/page/index.html
./app/node_modules/
./app/main.js

把spider文件夾整體打包為spider.asar，這樣的話需要在package.json中改下：

“main": “./spider.asar/main.js",

就可以正常引用node_modules里的庫了。

3 

基于圖片的功能拓展

圖片抓取到后，我們可以基于圖片做一些拓展功能。

比如：

3.1 保存所有圖片到本地

碰到一個(gè)很好的素材網(wǎng)站，想一口氣全部圖片下載下來，可以用到這個(gè)功能，這個(gè)比較簡單，用一個(gè)nodejs的庫image-downloader，把url全部下載下來即可。

3.2 分析圖片的主色調(diào)

這里用到另一個(gè)nodejs庫，node-vibrant，可以提取出圖片的主要顏色，還有百分比。我們可以把bahance上最近半年比較熱門的項(xiàng)目的圖片取下來，然后分析她們的顏色，做一個(gè)色彩趨勢(shì)報(bào)告。

3.3 圖片素材庫

作為我最近做的人工智能設(shè)計(jì)師

DIY一個(gè)人工智能設(shè)計(jì)師_v0.0.1

的圖片素材庫。這個(gè)時(shí)候要增加一個(gè)標(biāo)記內(nèi)容，就是自動(dòng)識(shí)別圖片的內(nèi)容，作為圖片的關(guān)鍵詞，以方便人工智能設(shè)計(jì)師進(jìn)行智能匹配。這邊可以調(diào)用clarifai的圖像識(shí)別api：

安裝

// 通過 NPM 安裝clarifai SDK
npm install clarifai

Nodejs使用clarifai

//初始化
const Clarifai = require('clarifai'); 
var app = new Clarifai.App( 
'xxxxxG1MIAGH9RRJ4YSV410paPZWhfTpOeerEb',
'KFxxxxxbAwo8aIZ3SRAJO0IJq-CtLQUj9Ph7mt' ); 

識(shí)別

// 通過上傳一個(gè)圖片的URL，識(shí)別圖片的內(nèi)容

app.models.predict(Clarifai.GENERAL_MODEL, 
'https://samples.clarifai.com/metro-north.jpg').then(
  function(response) {
   console.log(response);
  },function(err) { 
   console.error(err); 
  });

識(shí)別效果可以見上圖中的標(biāo)簽部分，我就是通過這個(gè)api自動(dòng)打標(biāo)簽的。

關(guān)于基于Electon的圖片采集工具是怎樣的問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。