详解基于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的checkbox下拉框插件代码
Jun 25 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
人族 TERRAN 概述
2020/03/14 星际争霸
一个简易需要注册的留言版程序
2006/10/09 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
jquery等待效果示例
2014/05/01 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
就业表自我评价分享
2014/02/06 职场文书
合作意向书范本
2014/03/31 职场文书
社团活动总结
2014/04/28 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
创先争优活动心得体会
2014/09/04 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
喋血孤城观后感
2015/06/08 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python