网页文章采集工具(ES62.1的模板和经验心得：ES6template支持)

　　网页文章采集工具(ES62.1的模板和经验心得：ES6template支持)

　　基于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标签。因此，将两者结合起来。

　　获取img标签的所有图片：

　　身体图像

　　获取背景图片需要用到window.getComputedStyle，通过css属性获取。

　　window.getComputedStyle("元素", "伪类");

　　var dom = document.getElementById("test"),

   style = window.getComputedStyle(dom , ":after");

　　1.3 返回得到的结果

　　电子注入webview的代码可以通过return返回，

　　也可以写成注入的代码：

　　

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

　　在渲染过程中，通过：

　　electron.ipcRenderer.on('autoChat',(e,result)=>{

 console.log(result,'ipc');

});

　　接收结果。

　　2

　　一些经验和体会：

　　2.1 ES6 模板字符串

　　Electron 支持 ES6，ES6 引入了一种新的字符串字面量语法，我们称之为模板字符串。

　　var code=``;

　　除了在普通字符串中使用反引号字符“而不是引号”或“之外，它们看起来与普通字符串相同。在最简单的情况下，它们的行为与普通字符串相同：

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

　　与普通字符串不同，模板字符串可以写成多行：

　　var code=`

var dom=document......

function getURL(){

let v=.....

} 

`;

　　很适合写注入的js代码~

　　2.2 电子加密

　　由于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 库图像下载器下载所有 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的图片采集工具的问题解答分享到这里，希望以上内容对大家有帮助，如果还有很多疑问没有解决，可以关注到易速云行业资讯频道了解更多相关知识。