开发笔记：基于Electon的图片采集工具

　　开发笔记：基于Electon的图片采集工具

　　题图，由ACE Land 人工智能设计师赞助。

　　

　　<p style="line-height: 1.75em;">人这一辈子没法做太多的事情，<br />所以每一件都要做得精彩绝伦。<br />你的时间有限，<br />所以不要为别人而活。<br />不要被教条所限，<br />不要活在别人的观念里。<br />不要让别人的意见左右自己内心的声音。<br /><br />最重要的是，<br />勇敢的去追随自己的心灵和直觉，<br />只有自己的心灵和直觉才知道你自己的真实想法，<br />其他一切都是次要。<br /><br />——乔布斯</p>

　　以下是正文，总结下近来使用electron的心得。

　　

　　工具的界面是这样的，上面是一些导入数据，提交到服务器的操作，还有输入URL的输入框，下面主要是爬取结果的呈现区域。

　　技术构架：

　　Electron＋Nodejs

　　1

　　实现思路：

　　1.1 *敏*感*词*webview风波，注入js代码

　　利用electron的webContents，*敏*感*词*须要获取图片的网页，当网页加载完成，促发‘dom-ready’事件，然后在网页中注入JS代码。

　　主要用了这个api：

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

　　如：

　　win.webContents.on('dom-ready', () => {<br /><br />  win.webContents.executeJavaScript(code[,userGesture,callback])

　　})；<br />

　　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返回，

　　也可以通过在注入代码中写入：

　　<br />electron.remote.getGlobal(‘webWin').webContents.send('autoChat',res);

　　在渲染进程中，通过：

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

　　接收结果。

　　2

　　一些经验心得：

　　2.1 ES6的模板字符串template strings

　　electron 支持ES6,ES6引入了一种新型的字符串字面量句型，我们称之为模板字符串。

　　var code=``;

　　除了使用反撇号字符 ` 代替普通字符串的冒号 ' 或 " 外，它们看起来与普通字符串并无二致。在最简单的情况下，它们与普通字符串的表现一致：

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

　　与普通字符串不同的是，模板字符串可以多楷书写：

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

　　非常适宜写注入的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/<br />./page/index.html<br />./css/<br />./main.js<br />./node_modules/

　　./app/spider/js/<br />./app/spider/css/<br />./app/spider/page/index.html<br />./app/node_modules/<br />./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 图片素材库

　　作为我近来做的人工智能设计师

　　的图片素材库。这个时侯要降低一个标记内容，就是手动辨识图片的内容，作为图片的关键词，以便捷人工智能设计师进行智能匹配。这边可以调用clarifai的图象辨识api：

　　安装

　　// 通过 NPM 安装clarifai SDK<br />npm install clarifai

　　Nodejs使用clarifai

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

　　识别

　　// 通过上传一个图片的URL，识别图片的内容<br /><br />app.models.predict(Clarifai.GENERAL_MODEL, <br />'https://samples.clarifai.com/metro-north.jpg').then(<br />  function(response) {<br />   console.log(response);<br />  },function(err) { <br />   console.error(err);  <br />  });

　　识别疗效可以见上图中的标签部份，我就是通过这个api手动打标签的。

　　打一则广告：

　　最近在知乎上开的LIVE，

　　聊聊设计师做编程的那些事

　　

　　长按二维码，进入

　　往期精彩文章直达：

　　本公众号定期更新关于

　　设计师、程序员发挥创意

　　互相融合的手册、作品。

　　主要技术栈：

　　nodejs、react native、electron

　　欢迎关注，转发～

　　欢迎长按二维码

　　关注本号