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