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

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

时间: 2019-01-29

nodejs的压缩文件模块archiver用法示例

本文实例讲述了nodejs的压缩文件模块archiver用法.分享给大家供大家参考,具体如下: 发现了个更好用的 zip-local https://www.npmjs.com/package/zip-local var zipper = require("zip-local"); zipper.sync.zip("/Users/xxx/xx/xx").compress().save("/Users/xxx/xx/xx.zip"); 如下代码实现

Node.js站点使用Nginx作反向代理时配置GZip压缩的教程

node.js 开发的站点,如果你也是用了nginx实现反向代理. 那么在服务端可以轻松实现 gzip 压缩,让站点浏览更顺畅. 前提条件: node.js + nginx 反向代理. node.js 需要做的工作: express 4.0以下版本: app.use(express.compress()); //主要是这句 app.use(express.json()); app.use(express.urlencoded()); app.use(express.bodyParser());

Node4-5静态资源服务器实战以及优化压缩文件实例内容

浏览器控制台看一下RequestHeader有一个Accept-Encoding,而RespondHeaders中也会有一个Content-Encoding和他进行对应. Accept-Encoding当我们的浏览器发起一个文件的请求时告诉服务器支持哪几种压缩方式,也就是服务器用这几种压缩方式浏览器都能解压,当服务器接收到请求后,知道浏览器支持的压缩方式,服务器就会自动识别其中一种进行压缩并且告诉浏览器自己用了哪个方式压缩,浏览器知道后就知道用哪种对应方式解压了 根据拓展名限制一下支持的几钟压缩

node下使用UglifyJS压缩合并JS文件的方法

现在UglifyJS的最新版本为 2.8.13,主要功能为JS的压缩和合并,下面直接进入教程: 安装: <span style="font-size:18px;color:#006600;">npm install uglify-js -g</span> 将uglifyjs安装为全局变量,方便我们在任何地方使用. <span style="color:#006600;">下面是shell命令的中文解释: * source-map

Nodejs实现图片上传、压缩预览、定时删除功能

前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番. 第一步,node基本配置 这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力.更健壮的web框架. 1.引入基本配置 const Koa = require('koa');// koa框架 const Router = require('koa-router');// 接口必备 const cors = require('koa2-cors'); // 跨域必备 const tinify =

Node.js服务器开启Gzip压缩教程

Gzip是什么 复制大神们的解释吧: GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNIX系统的文件压缩.我们在Linux中经常会用到后缀为.gz的文件,它们就是GZIP格式的.现今已经成为Internet 上使用非常普遍的一种数据压缩格式,或者说一种文件格式.HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站

详解node字体压缩插件font-spider的用法

需求: 根据甲方要求,使用UI中指定字体 移动端默认显示系统默认字体,非系统默认字体需要自行引入字体包 字体包过大,字体包通常在几MB,严重拖累页面加载速度 分析: 文本内容为固定内容,不需要更新 文本内容大多为常用文字,大多文字用不上 插件: font-spider node 安装插件方法:npm install font-spider -g 操作: 安装插件 提取项目文字: 创建一个临时html,将所有项目需要用到的文本放到html中 在htmnl中写入样式代码,举个栗子: @font-fa

Nodejs关于gzip/deflate压缩详解

0x01.关于 写http时候,在接收http请求时候,出现乱码,后来发现是gzip没有解压. 关于gzip/deflate压缩,有放入管道压缩,和非管道压缩方法. 0x02.管道压缩 Node中的I/O是异步的,因此对磁盘和网络的读写需要通过回调函数来读取数据. 当内存中无法一次装下需要处理的数据时,或者一边读取一边处理更加高效时,我们就需要用到数据流. NodeJS中通过各种Stream来提供对数据流的操作. 官网提供了管道方法: 复制代码 代码如下: // client request e

基于Node.js实现压缩和解压缩的方法

压缩格式 zip 和 gzip 是两种我们最常见到的压缩格式,当然,gzip 在 Windows 下很少有人接触. tar 是一种归档格式,它默认不会压缩,需要结合 gzip 来将最终的 tar 文件以 gzip 格式压缩成为一个 tar.gz 文件,通常我们会缩写为 tgz. 为什么没有提到 rar?因为它是专利保护的算法,你可以免费获得解压工具,而压缩工具是需要付费的.所以我们一般应用场景下,很少会提供 rar 压缩文件. 本文将分别介绍 gzip,tar,tgz 和 zip 的压缩和解压缩

node.js实现简单的压缩/解压缩功能示例

本文实例讲述了node.js实现简单的压缩/解压缩功能.分享给大家供大家参考,具体如下: 压缩的例子 非常简单的几行代码,就完成了本地文件的gzip压缩. var fs = require('fs'); var zlib = require('zlib'); var gzip = zlib.createGzip(); var inFile = fs.createReadStream('./extra/fileForCompress.txt'); var out = fs.createWriteS

NodeJS服务器实现gzip压缩的示例代码

本文介绍了NodeJS服务器实现gzip压缩,分享给大家,具体如下: 在浏览器向服务器请求静态资源时,服务器为了减小在网络传输过程中消耗的流量和时间,都是将静态资源经过压缩后返回给服务器的,实现压缩的算法有 deflate 和 gzip 等,最常用的是 gzip 压缩. gzip 简介 在浏览器和服务器之间通过 gzip 压缩流实现传输的过程可以用下图表示. 当浏览器向服务器请求静态资源,服务器会将静态资源经过处理转换为压缩流,大大减小文件体积,然后将压缩流返回给浏览器,浏览器通过压缩的类型重新

Java GZIP压缩与解压缩代码实例

这篇文章主要介绍了Java GZIP压缩与解压缩代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.GZIP压缩 public static byte[] compress(String str, String encoding) { if (str == null || str.length() == 0) { return null; } ByteArrayOutputStream out = new ByteArrayOutput

django在保存图像的同时压缩图像示例代码详解

假设我们有一个非常简单的Post模型,它将是一个图像及其描述, from django.db import models class Post(models.Model): text = models.TextField() image = models.ImageField(upload_to='images/') 但是我们要优化图像大小,这将由我们Post的image字段指出. 这样做有充分的理由-它有助于更快地加载网站/应用程序并减少我们的服务器存储. 在使用Django之前,首先让我们简

Nodejs实现文件上传的示例代码

笔者用nodejs做项目时需要用到文件上传的功能,在网上搜索了很多教程,找到了一个express的中间件,用于处理 multipart/form-data 类型的表单数据,可以很方便的将表单中的文件数据保存到服务器. 介绍 简单的用法 定义存储器 Multer作为express的一个中间件,我们可以很方便的自定义上传的文件目录以及保存的文件名.先看一个最简单的用法, demo1地址 : var express = require('express'); var multer = require(

java生成压缩文件示例代码

代码: 复制代码 代码如下: import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream; import org.apache.tools.zip.ZipEntry;import org.apache.tools.zip.ZipOutputStream; /**  * @project: Test  * @author

MSSQLSERVER跨服务器连接(远程登录)的示例代码

MSSQLSERVER跨服务器链接服务器创建方法如下 复制代码 代码如下: --声明变量  Declare @svrname varchar(255),  @dbname varchar(255), @sapassword varchar(255)   --请在执行前,根据实际情况修改下列变量 select @svrname  = '目标服务器名',       @dbname   = '目标数据库',   @sapassword  = 目标数据库密码    if exists ( select

用element的upload组件实现多图片上传和压缩的示例代码

我用vuex做状态管理,七牛云做图床. 项目地址:多图片上传组件 效果展示 项目执行流程 首先,让我们来分析一下实现多图片上传的流程: 前端向后端请求用来上传图片至服务器的token 后端为每张要上传的图片生成一个图片名,并用这个图片名生成token 后端将图片名和token返回给前端 前端拿到token以后,将图片上传至服务器 上传成功以后,前端将图片名发给后端 后端将图片名存入数据库 项目实现过程 1.我们要利用element-ui的Upload组件布置界面: //upload.vue <e

NodeJS实现视频转码的示例代码

视频转码就是一个先解码,再编码的过程,从而将原来的视频转换成我们需要的视频.这种转换可能包括各式(mp4/avi/flv等).分辨率.码率.帧率等. 传统的视频转码中,很常用的工具是FFmpeg.FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序. 在nodejs中,也有FFmpeg,叫做node-fluent-ffmpeg.node-fluent-ffmpeg是一个node上可用的ffmpeg,使用前必须先安装了ffmpeg. ffmpeg FFmpeg是一套

VBS获取GZIP压缩的HTTP内容的实现代码

不少网站为了提高加载速度,启用HTTP服务器的GZIP压缩功能,当客户端发送的HTTP请求中声明可以接受GZIP编码时,服务器自动对HTTP响应内容进行GZIP压缩.但是,在VBS中想自动对GZIP编码进行解压就没有那么容易了. 不同组件对GZIP压缩的处理不尽相同,首先看Msxml2.XMLHTTP: 'By Demon 'http://demon.tw Dim http Set http = CreateObject("Msxml2.XMLHTTP") http.open &quo