详解基于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 相关文章推荐
jquery中ajax学习笔记3
Oct 16 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
js实现滚动条自动滚动
Dec 13 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
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
python中cPickle类使用方法详解
2018/08/27 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python如何实现FTP功能
2020/05/28 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
公司培训欢迎词
2014/01/10 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
店长职务说明书
2014/02/04 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
被委托人身份证明
2015/08/07 职场文书