紧缩图片桌面运用imagemin-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用的是一个mini版的chrome浏览器，然后帮我们完成了浏览器跟体系(win & mac)交互的的很多api接口。

我们能够经由过程一般写网页的体式格局举行开辟，当须要举行与体系交互的操纵时，我们只须要在我们网页中的js历程（这里应当叫做这个桌面运用的衬着历程）抛出一个事宜，然后在electron的主历程举行监听，收到事宜后挪用响应的api接口，效果再反过来用事宜的体式格局抛给衬着历程。

electron的装置和进修能够上官网https://electronjs.org/举行进修。

ps：这里有一个electron的坑说一下，electron和jquery存在争执，所以直接用script标签引入会失利，在windows对象中找不到jQuery对象。这里我们能够加这么一句处置惩罚。

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

回到正题，起首我们在index.html中增添一个按钮来翻开体系的途径挑选器。

<button id="input-btn">挑选途径</button>

在衬着历程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中，监听衬着历程抛出的事宜，并挪用api接口后放回效果。

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

如许我们完成了运用体系api接口挑选途径的功用。但实在我们现实的运用场景中途径挑选器的体式格局并非迥殊的轻易，所以我们完成另一个功用。

拖动将文件或许文件夹拖入网页中，猎取到对应的途径。这里运用了js+div完成了这个功用。

index.html

<!--可拖入地区-->
<div id="holder" class="jumbotron holder">
</div>
<style>
        /* 拖拽的地区款式 */
        .holder {
            min-height: 200px;
            background: #eee;
            margin: 2em;
            padding: 1em;
            border: 0px dotted #eee;
            border-radius: 10px;
            transition: .3s all ease-in-out;
        }

        /* 拖拽时用jQuery为其增加边框款式的class */
        .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) => {
    // 挪用 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或更高版本