基于Electon的圖片采集工具是怎樣的

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

工具的界面是這樣的，上面是一些導(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)聽(tīng)webview事件，注入js代碼

利用electron的webContents，監(jiān)聽(tīng)需要獲取圖片的網(wǎng)頁(yè)，當(dāng)網(wǎng)頁(yè)加載完成，促發(fā)‘dom-ready’事件，然后在網(wǎng)頁(yè)中注入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)站把圖片寫(xiě)到了background-image里，而不是用img標(biāo)簽。所以得2者結(jié)合。

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

body.images

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

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

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

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

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

也可以通過(guò)在注入代碼中寫(xiě)入：

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

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

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

接收結(jié)果。

2 

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

2.1 ES6的模板字符串template strings

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

var code=``;

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

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

與普通字符串不同的是，模板字符串可以多行書(shū)寫(xiě)：

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

非常適合寫(xiě)注入的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è)坑，通過(guò)asar加密后的node_modules中有些庫(kù)引用不了，所以我調(diào)整了下打包方式，把node_modules跟我的代碼分開(kāi)存放，比如

./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，這樣的話(huà)需要在package.json中改下：

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

就可以正常引用node_modules里的庫(kù)了。

3 

基于圖片的功能拓展

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

比如：

3.1 保存所有圖片到本地

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

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

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

3.3 圖片素材庫(kù)

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

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

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

安裝

// 通過(guò) NPM 安裝clarifai SDK
npm install clarifai

Nodejs使用clarifai

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

識(shí)別

// 通過(guò)上傳一個(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í)別效果可以見(jiàn)上圖中的標(biāo)簽部分，我就是通過(guò)這個(gè)api自動(dòng)打標(biāo)簽的。

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