基于electron制作一個(gè)node壓縮圖片的桌面應(yīng)用

bigdevil_s 發(fā)布于2019-08-26 13:30 / 2678人閱讀

摘要：壓縮圖片桌面應(yīng)用基于制作一個(gè)壓縮圖片的桌面應(yīng)用下載地址項(xiàng)目源碼準(zhǔn)備工作我們來整理一下我們需要做什么壓縮圖片模塊獲取文件路徑桌面應(yīng)用生成壓縮圖片我們需要使用這個(gè)庫來壓縮圖片，這里我們把這個(gè)庫封裝成壓縮模塊。

壓縮圖片桌面應(yīng)用imagemin-electron

基于electron制作一個(gè)node壓縮圖片的桌面應(yīng)用

下載地址：https://github.com/zenoslin/imagemin-electron/releases

項(xiàng)目源碼Github：https://github.com/zenoslin/imagemin-electron

準(zhǔn)備工作

我們來整理一下我們需要做什么：

壓縮圖片模塊

獲取文件路徑

桌面應(yīng)用生成

壓縮圖片

我們需要使用imagemin這個(gè)庫來壓縮圖片，這里我們把這個(gè)庫封裝成壓縮模塊。

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用的是一個(gè)mini版的chrome瀏覽器，然后幫我們實(shí)現(xiàn)了瀏覽器跟系統(tǒng)(win & mac)交互的的許多api接口。

我們可以通過正常寫網(wǎng)頁的方式進(jìn)行開發(fā)，當(dāng)需要進(jìn)行與系統(tǒng)交互的操作時(shí)，我們只需要在我們網(wǎng)頁中的js進(jìn)程（這里應(yīng)該叫做這個(gè)桌面應(yīng)用的渲染進(jìn)程）拋出一個(gè)事件，然后在electron的主進(jìn)程進(jìn)行監(jiān)聽，收到事件后調(diào)用相應(yīng)的api接口，結(jié)果再反過來用事件的方式拋給渲染進(jìn)程。

electron的安裝和學(xué)習(xí)可以上官網(wǎng)https://electronjs.org/進(jìn)行學(xué)習(xí)。

ps：這里有一個(gè)electron的坑說一下，electron和jquery存在沖突，所以直接用script標(biāo)簽引入會(huì)失敗，在windows對(duì)象中找不到jQuery對(duì)象。這里我們可以加這么一句解決。

回到正題，首先我們?cè)?b>index.html中增加一個(gè)按鈕來打開系統(tǒng)的路徑選擇器。

在渲染進(jìn)程renderer.js中，監(jiān)聽按鈕的點(diǎn)擊，以及監(jiān)聽主線程返回的事件。

const {ipcRenderer} = require("electron")
const inputBtn = document.getElementById("input-btn")

inputBtn.addEventListener("click", (event) => {
    console.log("點(diǎn)擊輸入按鈕")
    ipcRenderer.send("open-file-dialog-input")
})

ipcRenderer.on("input-path", (event, path) => {
    console.log(`收到完成信息 ${path}`)
    _inputPath = path
    inputPath.value = `${path}`
})

在主進(jìn)程main.js中，監(jiān)聽渲染進(jìn)程拋出的事件，并調(diào)用api接口后放回結(jié)果。

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接口選擇路徑的功能。但其實(shí)我們實(shí)際的使用場(chǎng)景中路徑選擇器的方式并不是特別的方便，所以我們實(shí)現(xiàn)另一個(gè)功能。

拖動(dòng)將文件或者文件夾拖入網(wǎng)頁中，獲取到對(duì)應(yīng)的路徑。這里使用了js+div實(shí)現(xiàn)了這個(gè)功能。

index.html

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) => {
    // 調(diào)用 preventDefault() 來避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理
    //（drop 事件的默認(rèn)行為是以鏈接形式打開
    event.preventDefault()
    holder.className = "jumbotron holder"
    var file = event.dataTransfer.files[0]
    _inputPath = inputPath.value = file.path
}

將我們獲取到的文件路徑傳入前面編寫的壓縮文件模塊，這樣我們就可以完成了圖片的壓縮。

桌面應(yīng)用生成

最后，我們利用electron-packager完成對(duì)electron桌面應(yīng)用的打包。

//mac
electron-packager . --out=out --platform=mas --arch=x64
//win
electron-packager . --platform=win32 --arch=x64

ps：在非Windows主機(jī)平臺(tái)上進(jìn)行打包，需要安裝Wine 1.6或更高版本

云服務(wù)器 GPU云服務(wù)器 webrtc結(jié)合electron桌面分享基于webrtc的遠(yuǎn)程桌面私有的圖片壓縮基于云計(jì)算的應(yīng)用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108935.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

bigdevil_s

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

1

閱讀 3841·2021-11-23 09:51
關(guān)于安裝wireshark中npcap一直無法安裝以及winpcap無法安裝解決方法

閱讀 4629·2021-11-15 11:37
工資低？裸辭？項(xiàng)目黃？走了多少彎路只有我自己知道！

閱讀 3603·2021-09-02 15:21
Zoom 公布其“1 億美元發(fā)展基金”的首輪投資名單

閱讀 2804·2021-09-01 10:31
酷銳云：周年慶第二波，新上香港、美國GIA直連線路特價(jià)套餐，限量20臺(tái)

閱讀 938·2021-08-31 14:19
HOSTMEM ，$10/年， 1核/512M內(nèi)存/10GB SSD/500GB流量/1G帶寬

閱讀 918·2021-08-11 11:20
傲游主機(jī)：美國CN2/香港CN2/德國CN2/荷蘭CN2/香港高防VPS全場(chǎng)8折

閱讀 3372·2021-07-30 15:30
一個(gè)圖片偶爾加載不出來的事故

閱讀 1759·2019-08-30 15:54

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

基于electron制作一個(gè)node壓縮圖片的桌面應(yīng)用

相關(guān)文章

**基于electron-react-redux的桌面程序制作**

Electron入門介紹

***electron-ui 快速方便的打造炫酷的桌面應(yīng)用***

翻譯 | 擺脫瀏覽器限制的JavaScript

**vue-electron制作網(wǎng)易云音樂客戶端**

發(fā)表評(píng)論

0條評(píng)論

bigdevil_s

男|高級(jí)講師

TA的文章

1

關(guān)于安裝wireshark中npcap一直無法安裝以及winpcap無法安裝解決方法

工資低？裸辭？項(xiàng)目黃？走了多少彎路只有我自己知道！

Zoom 公布其“1 億美元發(fā)展基金”的首輪投資名單

酷銳云：周年慶第二波，新上香港、美國GIA直連線路特價(jià)套餐，限量20臺(tái)

HOSTMEM ，$10/年， 1核/512M內(nèi)存/10GB SSD/500GB流量/1G帶寬

傲游主機(jī)：美國CN2/香港CN2/德國CN2/荷蘭CN2/香港高防VPS全場(chǎng)8折

一個(gè)圖片偶爾加載不出來的事故

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

基于electron制作一個(gè)node壓縮圖片的桌面應(yīng)用

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！