Making a desktop application of compressed node pictures based on electron

Time:2020-1-22

Compressed picture desktop application imagemin electron

Be based onelectronMake anodeDesktop applications for compressed pictures

Download address: https://github.com/zenoslin/imagemin-electron/releases

GitHub: https://github.com/zenoslin/imagemin-electron

Preparation

Let’s sort out what we need to do:

  • Compression picture module
  • Get file path
  • Desktop application generation

Compress pictures

We need to useimageminThis library is used to compress pictures. Here we encapsulate this library as a compression module.

const imagemin = require('imagemin')
const imageminMozjpeg = require('imagemin-mozjpeg')
const imageminPngquant = require('imagemin-pngquant')
const imageminGifsicle = require('imagemin-gifsicle')

async function compass(input, output, opts, callback) {
    let log = await imageminCompass(input, output, opts)
    callback(log)
}

async function imageminCompass(input, output = 'temp', opts = {}) {
    input = (typeof input == 'string') ? [input] : input;
    return await imagemin(input, output, {
            use: [
                imageminMozjpeg(opts),
                imageminPngquant(opts),
                imageminGifsicle({
                    optimizationLevel:3
                })
            ]
        })
        .then(file => {
            return {
                status: true,
                data: file
            };
        })
        .catch(e => {
            console.log(e);
            return {
                status: false,
                error: e.toString()
            }
        });
}

module.exports = {
    compass: compass
};

Get file path

In my understanding, electron uses a mini version of Chrome browser, and then helps us to implement many API interfaces between browser and system (win & MAC).

We can develop through the way of normal web page writing. When we need to interact with the system, we only need to throw an event in the JS process of our web page, which should be called the rendering process of the desktop application, and then monitor the main process of electron, then call the corresponding API interface after receiving the event, and then turn it in the way of event. To the rendering process.

The installation and learning of electron can be carried out on the official website https://electronjs.org/.

PS: there is a hole in the electron. Let’s say that there is a conflict between the electron and jQuery, so use thescriptLabel introduction will fail, inwindowsObject not foundjQueryObject. Here we can add such a sentence to solve it.

<script></script>
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>

To get back to the point, first of all, we areindex.htmlAdd a button to open the system’s path selector.

< button id = "input BTN" > select path < / button >

In the rendering processrenderer.jsIn, listen for the click of the button and the events returned by the main thread.

const {ipcRenderer} = require('electron')
const inputBtn = document.getElementById('input-btn')

inputBtn.addEventListener('click', (event) => {
    Console. Log ('click input button ')
    ipcRenderer.send('open-file-dialog-input')
})

ipcRenderer.on('input-path', (event, path) => {
    Console. Log (` received completion information ${path} ')
    _inputPath = path
    inputPath.value = `${path}`
})

In main processmain.jsListen for events thrown by the rendering process and call the API interface to put back the results.

ipcMain.on('open-file-dialog-input', (event) => {
    dialog.showOpenDialog({
        properties: ['openFile', 'openDirectory']
    }, (files) => {
        if (files) {
            Console. Log ('issue completion information ')
            event.sender.send('input-path', files)
        }
    })
})

In this way, we have completed the function of using the system API interface to select the path. But in fact, the way we actually use the path selector in the scene is not particularly convenient, so we implement another function.

Drag to drag a file or folder into a web page to get the corresponding path. It’s used herejs+divThis function is realized.

index.html

<! -- drag into area -- >
<div id="holder" class="jumbotron holder">
</div>
<style>
        /*Dragged area style*/
        .holder {
            min-height: 200px;
            background: #eee;
            margin: 2em;
            padding: 1em;
            border: 0px dotted #eee;
            border-radius: 10px;
            transition: .3s all ease-in-out;
        }

        /*Use jQuery to add border style class when dragging*/
        .holder-ondrag {
            border: 20px dotted #d45700;
        }
</style>

renderer.js

const holder = document.getElementById("holder")

holder.ondragenter = holder.ondragover = (event) => {
    event.preventDefault()
    holder.className = "jumbotron holder-ondrag"
}

holder.ondragleave = (event) => {
    event.preventDefault()
    holder.className = "jumbotron holder"
}

holder.ondrop = (event) => {
    //Call preventdefault() to avoid browser default processing of data
    //(the default behavior of a drop event is to open it as a link
    event.preventDefault()
    holder.className = "jumbotron holder"
    var file = event.dataTransfer.files[0]
    _inputPath = inputPath.value = file.path
}

Pass the file path we get to the compression file module written earlier, so we can complete the compression of the picture.

Desktop application generation

Finally, we use the electronic packager to complete theelectronPackaging of desktop applications.

//mac
electron-packager . --out=out --platform=mas --arch=x64
//win
electron-packager . --platform=win32 --arch=x64

PS: to package on a non windows host platform, you need to install wine 1.6 or later