详解基于electron制作一个node压缩图片的桌面应用

你长着一对翅膀。坚韧地飞吧,不要为风雨所折服;诚挚地飞吧,不要为香甜的蜜汁所陶醉。朝着明确的目标,飞向完美的人生。

基于electron制作一个node压缩图片的桌面应用

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

项目源码Github:https://github.com/zenoslin/imagemin-electron

准备工作

我们来整理一下我们需要做什么:

  1. 压缩图片模块
  2. 获取文件路径
  3. 桌面应用生成

压缩图片

我们需要使用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的安装和学习可以上官网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中增加一个按钮来打开系统的路径选择器。

<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或更高版本

本文详解基于electron制作一个node压缩图片的桌面应用到此结束。勤奋认真的你,再认真踏实些,必定收到累累的硕果。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
electron-builder配置项

vue3 electron-builder桌面应用开发----electron-update配置软件自动更新

前端Electron新手入门好代码教程详解

详解使用webpack+electron+reactJs开发windows桌面应用

Electron 如何调用本地模块的方法