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

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

工具的界面是這樣的，上面是一些導出數據，提交到服務器的操作，還有輸入URL的輸入框，下面主要是爬取結果的呈現區域。

技術架構：

Electron＋Nodejs

1 

實現思路：

1.1 監聽webview事件，注入js代碼

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

主要用了這個api：

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

如：

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

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

})；

1.2 遍歷HTML中的圖片URL

這里要注意，有很多網站把圖片寫到了background-image里，而不是用img標簽。所以得2者結合。

獲取所有img標簽的圖片：

body.images

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

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

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

1.3 返回獲取的結果

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

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

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

在渲染進程中，通過：

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

接收結果。

2 

一些經驗心得：

2.1 ES6的模板字符串template strings

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

var code=``;

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

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

發現個坑，通過asar加密后的node_modules中有些庫引用不了，所以我調整了下打包方式，把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 保存所有圖片到本地

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

3.2 分析圖片的主色調

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

3.3 圖片素材庫

作為我最近做的人工智能設計師

DIY一個人工智能設計師_v0.0.1

的圖片素材庫。這個時候要增加一個標記內容，就是自動識別圖片的內容，作為圖片的關鍵詞，以方便人工智能設計師進行智能匹配。這邊可以調用clarifai的圖像識別api：

安裝

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

Nodejs使用clarifai

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

識別

// 通過上傳一個圖片的URL，識別圖片的內容

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

識別效果可以見上圖中的標簽部分，我就是通過這個api自動打標簽的。

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