詳解基于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瀏覽器，然后幫我們實現(xiàn)了瀏覽器跟系統(tǒng)(win & mac)交互的的許多api接口。
我們可以通過正常寫網頁的方式進行開發(fā)，當需要進行與系統(tǒng)交互的操作時，我們只需要在我們網頁中的js進程（這里應該叫做這個桌面應用的渲染進程）拋出一個事件，然后在electron的主進程進行監(jiān)聽，收到事件后調用相應的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中增加一個按鈕來打開系統(tǒng)的路徑選擇器。
<button id="input-btn">選擇路徑</button>
在渲染進程renderer.js中，監(jiān)聽按鈕的點擊，以及監(jiān)聽主線程返回的事件。
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中，監(jiān)聽渲染進程拋出的事件，并調用api接口后放回結果。
ipcMain.on('open-file-dialog-input', (event) => {
dialog.showOpenDialog({
properties: ['openFile', 'openDirectory']
}, (files) => {
if (files) {
console.log('發(fā)出完成信息')
event.sender.send('input-path', files)
}
})
})
這樣我們完成了使用系統(tǒng)api接口選擇路徑的功能。但其實我們實際的使用場景中路徑選擇器的方式并不是特別的方便，所以我們實現(xiàn)另一個功能。
拖動將文件或者文件夾拖入網頁中，獲取到對應的路徑。這里使用了js+div實現(xiàn)了這個功能。
index.html
<!--可拖入區(qū)域-->
<div id="holder" class="jumbotron holder">
</div>
<style>
/* 拖拽的區(qū)域樣式 */
.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或更高版本
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了一些你或許不知道的npm實用技巧，分享一些 npm 包管理工具的實用小竅門，希望能夠略微提高下前端、Node.js 開發(fā)者的生活質量，需要的朋友可以參考下2019-07-07
assert 模塊主要用于編寫程序的單元測試時使用，通過斷言可以提早發(fā)現(xiàn)和排查出錯誤。下面這篇文章主要給大家介紹了關于node.js學習之斷言assert的相關資料，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2017-09-09
這篇文章主要介紹了node.js中的fs.mkdirSync方法使用說明,本文介紹了fs.mkdirSync方法說明、語法、接收參數、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了輕松創(chuàng)建nodejs服務器（6）：作出響應,我們接著改造服務器,讓請求處理程序能夠返回一些有意義的信息,需要的朋友可以參考下2014-12-12
npm安裝windows-build-tools卡在Successfully?installed?Python2.7
這篇文章主要介紹了npm安裝windows-build-tools卡在Successfully?installed?Python2.7的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了nodeJs編寫錯誤處理中間件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了mac上node.js環(huán)境的安裝測試，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了說說node中的可讀流和可寫流的區(qū)別，詳細的介紹了可讀流和可寫流，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Node.js之http模塊的用法，對Node.js感興趣的同學，可以參考下2021-04-04
這篇文章主要介紹了NodeJS服務器實現(xiàn)gzip壓縮的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10