electronに基づいて一つのnode圧縮画像のデスクトップアプリケーションを作ります.

圧縮画像のデスクトップにimagmin-electronを適用します.electronに基づいてnodeの圧縮画像を作成するデスクトップアプリケーション.
ダウンロード先:https://github.com/zenoslin/imagemin-electron/releases
プロジェクトのソースGithub:https://github.com/zenoslin/imagemin-electron
準備工作
整理してみます.私たちは何をするべきですか?

圧縮画像モジュール

ファイルパスを取得する

デスクトップアプリケーション生成

画像を圧縮する
私たちはimageminのこのライブラリを使って画像を圧縮したいです.ここではこのライブラリを圧縮モジュールに包装します.

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
};

ファイルのパスを取得
私の理解では、electronはミニバージョンのchromeブラウザを使って、ブラウザとシステム(win&mac)が相互作用する多くのアプリインターフェースを実現してくれました.
私達は正常にウェブページを書く方式で開発することができます.システムと相互作用する操作が必要な時、私達は私達のウェブページのjsプロセス(ここではこのデスクトップアプリケーションと呼ぶべきレンダリングプロセス)で一つのイベントを投げ出して、electronのメインプロセスでモニターして、イベントを受け取ったら相応のapiインターフェースを呼び出します.結果はまた逆に事件の方式でレンダリングプロセスに投げます.
electronのインストールと学習は公式サイトに行くことができます.https://electronjs.org/学習を行う
ps:ここにelectronのピットがあります.electronとjqueryは衝突していますので、直接scriptタグで導入すると失敗します.windowsオブジェクトの中にjQueryオブジェクトが見つけられません.ここではこのようにして解決します.

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

本題に戻ります.まず、index.htmlにシステムのパスセレクタを開くボタンを追加します.

レンダリングプロセスrenderer.jsにおいて、待ち受けボタンのクリックと、メインスレッドの復帰イベントの傍受が行われる.

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

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

ipcRenderer.on('input-path', (event, path) => {
    console.log(`       ${path}`)
    _inputPath = path
    inputPath.value = `${path}`
})

メインプロセスmain.jsでは、レンダリングプロセスから投げられたイベントを傍受し、アプリインターフェースを呼び出して結果を戻す.

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

このようにして、システムアプリインターフェースを使って経路を選択する機能を完成しました.しかし、実際に使用しているシーンでは経路選択の方式は特に便利ではないので、別の機能を実現します.
ドラッグしてファイルまたはフォルダをページにドラッグして、対応するパスを取得します.この機能はここでjs＋divを使用して実現される.
index.

レンダー.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) => {
    //    preventDefault()               
    //（drop                
    event.preventDefault()
    holder.className = "jumbotron holder"
    var file = event.dataTransfer.files[0]
    _inputPath = inputPath.value = file.path
}

私たちが取得したファイルパスを前に作成した圧縮ファイルモジュールに送ってください.そうすると、画像の圧縮が完了します.
デスクトップアプリケーションの生成
最後に、私達はelectron-packagerを利用してelectronデスクトップアプリケーションの包装を完成しました.

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

ps:Windows以外のホストプラットフォームでパッケージ化するには、Wine 1.6またはより高いバージョンをインストールする必要があります.