基於electron製做一個node壓縮圖片的桌面應用

壓縮圖片桌面應用imagemin-electron

基於electron製做一個node壓縮圖片的桌面應用

下載地址：github.com/zenoslin/im…

項目源碼Github：github.com/zenoslin/im…

準備工做

咱們來整理一下咱們須要作什麼：

• 壓縮圖片模塊
• 獲取文件路徑
• 桌面應用生成

壓縮圖片

咱們須要使用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的安裝和學習能夠上官網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或更高版本