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


Posted in Javascript onJanuary 29, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
Django使用多数据库的方法
Sep 06 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 #Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 #Javascript
JS实现的类似微信聊天效果示例
Jan 29 #Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 #Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 #Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 #Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 #Javascript
You might like
解析zend Framework如何自动加载类
2013/06/28 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
详解参数传递四种形式
2015/07/21 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
python排序方法实例分析
2015/04/30 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python+opencv实现阈值分割
2018/12/26 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
小学体育教学反思
2014/01/31 职场文书
餐厅总厨求职信
2014/03/04 职场文书
租房合同协议书
2014/04/09 职场文书
公司年终奖分配方案
2014/06/16 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2015年超市工作总结
2015/04/09 职场文书