electron如何制作一個node壓縮圖片的桌面應(yīng)用

這篇文章將為大家詳細講解有關(guān)electron如何制作一個node壓縮圖片的桌面應(yīng)用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

準備工作

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

1. 壓縮圖片模塊

2. 獲取文件路徑

3. 桌面應(yīng)用生成

壓縮圖片

我們需要使用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進程（這里應(yīng)該叫做這個桌面應(yīng)用的渲染進程）拋出一個事件，然后在electron的主進程進行監(jiān)聽，收到事件后調(diào)用相應(yīng)的api接口，結(jié)果再反過來用事件的方式拋給渲染進程。

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

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

<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)聽渲染進程拋出的事件，并調(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)頁中，獲取到對應(yīng)的路徑。這里使用了js+div實現(xiàn)了這個功能。

index.html

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

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

桌面應(yīng)用生成

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

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

關(guān)于“electron如何制作一個node壓縮圖片的桌面應(yīng)用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。