国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

基于electron制作一個node壓縮圖片的桌面應用

bigdevil_s / 2626人閱讀

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

壓縮圖片桌面應用imagemin-electron

基于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接口。

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

electron的安裝和學習可以上官網(wǎng)https://electronjs.org/進行學習。

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

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

在渲染進程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)聽渲染進程拋出的事件，并調(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接口選擇路徑的功能。但其實我們實際的使用場景中路徑選擇器的方式并不是特別的方便，所以我們實現(xiàn)另一個功能。

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

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() 來避免瀏覽器對數(shù)據(jù)的默認處理
    //（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或更高版本

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108935.html

相關(guān)文章

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

    摘要：基于的桌面程序制作本文章將要講述怎么將，，結(jié)合起來，當中的結(jié)合很簡單，主要是與的結(jié)合還有與配合以及熱加載的配置有一個我自己做的也許會幫助到你步驟首先我們需要建立一個新的文件夾然后我們初始化一個，將一下代碼復制進剛才創(chuàng)建的中 基于electron-react-redux的桌面程序制作 本文章將要講述怎么將electron，react，redux結(jié)合起來，當中react+redux的結(jié)合很...

    ZweiZhao 評論0 收藏0

  • Electron入門介紹

    摘要：本文主要講解的入門。可以幫助我們管理包的下載依賴部署發(fā)布等。可以認為是中的。后續(xù)使用中，全部替換為即可。命令根據(jù)它，自動下載所需模塊用于創(chuàng)建窗口和處理系統(tǒng)事件安裝包的位置。 Electron是什么 可以認為Electron是一種運行環(huán)境庫，我們可以基于此，用HTML、JS和CSS寫桌面應用。PC端的UI交互，主要有web應用和桌面應用。具體采用哪種方式，主要看系統(tǒng)的應用場景，哪個更合適...

    wing324 評論0 收藏0

  • electron-ui 快速方便的打造炫酷的桌面應用

    摘要：是什么是基于和擴展出來的一套基礎的應用框架，目的是為了快速的搭建炫酷的桌面應用，其實也算不上框架只是一種解決方案而已，讓后來的開發(fā)者在少采坑的情況下搭建出相對漂亮而快速的應用為什么要做這個公司的有個項目使用搭建的，最開始只是套了個網(wǎng)頁 electron-ui是什么 electron-ui是基于electron和electron-vue擴展出來的一套基礎的應用框架，目的是為了快速的搭建炫...

    Magicer 評論0 收藏0

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

    摘要：在考慮宇航員的生命安全時，輕微的打嗝或者服務中斷都會釀成生死事故。也許最大的挑戰(zhàn)來自谷歌主導的簡稱。在最近的開發(fā)者峰會，以及今年的會議上，谷歌都為安排了大量討論。由微軟提供，是廣受歡迎的編輯器，到月份已經(jīng)獲得了超過五百萬用戶。 譯者：安冬 （滬江Web前端開發(fā)工程師）本文原創(chuàng)翻譯，轉(zhuǎn)載請注明作者及出處。原文地址：http://developer.telerik.com/... 技術(shù)世界...

    xfee 評論0 收藏0

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

    摘要：很好，前端任務又來了，開發(fā)過程中踩了不少坑，一個缺點就是體積大。切入正題，通過對的一些了解，業(yè)余時間通過搭建了一個網(wǎng)易云音樂客戶端，因為時間關(guān)系只做了客戶端的核心部分，有時間更新，這個項目會堅持做下去。 前言 就在兩個月前公司需求快速開發(fā)一款桌面應用軟件，嗯，快速。 并且提供了技術(shù)方案Nwjs，起初不知道這款框架的存在，網(wǎng)上查找了一波，發(fā)現(xiàn)更牛逼的一款快速搭建桌面應用的框架，那么它就是...

    Lin_YT 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<