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

bigdevil_s 发布于2019-08-26 13:30 / 2604人阅读

摘要：压缩图片桌面应用基于制作一个压缩图片的桌面应用下载地址项目源码准备工作我们来整理一下我们需要做什么压缩图片模块获取文件路径桌面应用生成压缩图片我们需要使用这个库来压缩图片，这里我们把这个库封装成压缩模块。

压缩图片桌面应用imagemin-electron

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

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

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

准备工作

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

压缩图片模块

获取文件路径

桌面应用生成

压缩图片

我们需要使用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对象。这里我们可以加这么一句解决。

回到正题，首先我们在index.html中增加一个按钮来打开系统的路径选择器。

在渲染进程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

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

GPU云服务器云服务器 webrtc结合electron桌面分享基于webrtc的远程桌面私有的图片压缩基于云计算的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108935.html

基于electron-react-redux的桌面程序制作

摘要：基于的桌面程序制作本文章将要讲述怎么将，，结合起来，当中的结合很简单，主要是与的结合还有与配合以及热加载的配置有一个我自己做的也许会帮助到你步骤首先我们需要建立一个新的文件夹然后我们初始化一个，将一下代码复制进刚才创建的中基于electron-react-redux的桌面程序制作本文章将要讲述怎么将electron，react，redux结合起来，当中react+redux的结合很...

ZweiZhao 2019-08-20 15:43 评论0 收藏0
Electron入门介绍

摘要：本文主要讲解的入门。可以帮助我们管理包的下载依赖部署发布等。可以认为是中的。后续使用中，全部替换为即可。命令根据它，自动下载所需模块用于创建窗口和处理系统事件安装包的位置。 Electron是什么可以认为Electron是一种运行环境库，我们可以基于此，用HTML、JS和CSS写桌面应用。PC端的UI交互，主要有web应用和桌面应用。具体采用哪种方式，主要看系统的应用场景，哪个更合适...

wing324 2019-08-21 18:41 评论0 收藏0
electron-ui 快速方便的打造炫酷的桌面应用

摘要：是什么是基于和扩展出来的一套基础的应用框架，目的是为了快速的搭建炫酷的桌面应用，其实也算不上框架只是一种解决方案而已，让后来的开发者在少采坑的情况下搭建出相对漂亮而快速的应用为什么要做这个公司的有个项目使用搭建的，最开始只是套了个网页 electron-ui是什么 electron-ui是基于electron和electron-vue扩展出来的一套基础的应用框架，目的是为了快速的搭建炫...

Magicer 2019-08-23 12:43 评论0 收藏0
翻译 | 摆脱浏览器限制的JavaScript

摘要：在考虑宇航员的生命安全时，轻微的打嗝或者服务中断都会酿成生死事故。也许最大的挑战来自谷歌主导的简称。在最近的开发者峰会，以及今年的会议上，谷歌都为安排了大量讨论。由微软提供，是广受欢迎的编辑器，到月份已经获得了超过五百万用户。译者：安冬（沪江Web前端开发工程师）本文原创翻译，转载请注明作者及出处。原文地址：http://developer.telerik.com/... 技术世界...

xfee 2019-08-20 19:02 评论0 收藏0
vue-electron制作网易云音乐客户端

摘要：很好，前端任务又来了，开发过程中踩了不少坑，一个缺点就是体积大。切入正题，通过对的一些了解，业余时间通过搭建了一个网易云音乐客户端，因为时间关系只做了客户端的核心部分，有时间更新，这个项目会坚持做下去。前言就在两个月前公司需求快速开发一款桌面应用软件，嗯，快速。并且提供了技术方案Nwjs，起初不知道这款框架的存在，网上查找了一波，发现更牛逼的一款快速搭建桌面应用的框架，那么它就是...

Lin_YT 2019-08-21 11:59 评论0 收藏0