Shulou(Shulou.com)06/01 Report--

What is the image acquisition tool based on Electon? in order to solve this problem, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

The interface of the tool is like this, above is some export data, submit to the server operation, as well as input URL input box, the following is mainly crawling the results of the presentation area.

Technical Architecture:

Electron+Nodejs

one

The idea of realization is:

1.1 listen for webview events and inject js code

Using electron's webContents, listen to the web page that needs to get the picture, when the web page loads, promote the 'dom-ready' event, and then inject JS code into the web page.

This api is mainly used:

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

Such as:

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

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

1.2 traversing the picture URL in HTML

It is important to note that there are many websites that write pictures in background-image instead of using img tags. So there is a combination of the two.

Get pictures of all img tags:

Body.images

To get the image of background-image, you need to use window.getComputedStyle, which is obtained through the css attribute.

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

1.3 return the obtained result

The code injected by electron into webview can be returned through return.

You can also write in the injected code:

Electron.remote.getGlobal ('webWin'). WebContents.send (' autoChat',res)

During the rendering process, by:

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

Console.log (result,'ipc')

});

Receive the results.

two

Some experience:

2.1 template string template strings for ES6

Electron support ES6,ES6 introduces a new type of string literal syntax, which we call template strings.

Var code= ``

Except that the reverse apostrophe character `is used instead of the quotation marks'or "of ordinary strings, they look no different from ordinary strings. In the simplest case, they behave the same as ordinary strings:

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

Unlike normal strings, template strings can be written on multiple lines:

Var code= `

Var dom=document.

Function getURL () {

Let vault.

}

``

It is very suitable for writing injected js code.

2.2 encryption of electron

Since the packaged programs in electron expose the source code directly, they are located in the app folder in the resources folder.

We can use asar to encrypt our source code.

Global installation:

Npm install-g asar

Package the app folder in resources as app.asar

Asar pack. / app app.asar

I found a hole, and some libraries in the node_modules encrypted through asar cannot be referenced, so I adjusted the packaging method to store node_modules separately from my code, such as

. / 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

Package the spider folder as a spider.asar as a whole, so you need to change it in package.json:

Main: ". / spider.asar/main.js"

The libraries in node_modules can be referenced normally.

three

Function expansion based on picture

After the picture is captured, we can do some expansion functions based on the picture.

For example:

3.1 Save all pictures locally

Encounter a very good material website, want to download all the pictures in one breath, you can use this function, this is relatively simple, use a nodejs library image-downloader, download all the url.

3.2 analyze the dominant tone of the picture

Another nodejs library, node-vibrant, is used here to extract the main colors of the image, as well as the percentage. We can take down the pictures of the most popular projects on bahance in the last six months, then analyze their colors and make a color trend report.

3.3 Picture material Library

As my recent artificial intelligence designer,

DIY an artificial intelligence designer _ v0.0.1

The picture material library of. At this time, it is necessary to add a tag content, that is, to automatically identify the content of the picture as the keyword of the picture, in order to facilitate the intelligent matching of artificial intelligence designers. You can call clarifai's image recognition api here:

Installation

/ / install clarifai SDK through NPM

Npm install clarifai

Nodejs uses clarifai

/ / initialize

Const Clarifai = require ('clarifai')

Var app = new Clarifai.App (

'xxxxxG1MIAGH9RRJ4YSV410paPZWhfTpOeerEb'

'KFxxxxxbAwo8aIZ3SRAJO0IJq-CtLQUj9Ph7mt')

Identify

/ / identify the content of an image by uploading the URL of an image

App.models.predict (Clarifai.GENERAL_MODEL

'https://samples.clarifai.com/metro-north.jpg').then(

Function (response) {

Console.log (response)

}, function (err) {

Console.error (err)

});

The recognition effect can be seen in the tag section in the image above, and it is through this api that I tag automatically.

This is the answer to the question about the Electon-based image acquisition tool. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.