详解基于electron制作一个node压缩图片的桌面应用

基于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}`})