基于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桌面應用的打包。
//macelectron-packager . --out=out --platform=mas --arch=x64//winelectron-packager . --platform=win32 --arch=x64
ps：在非Windows主機平臺上進行打包，需要安裝Wine 1.6或更高版本
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
