详解基于electron制作一个node压缩图片的桌面应用
(编辑:jimmy 日期: 2024/11/29 浏览:3 次 )
基于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') "_blank" href="https://electronjs.org/" rel="external nofollow" >https://electronjs.org/进行学习。ps:这里有一个electron的坑说一下,electron和jquery存在冲突,所以直接用script标签引入会失败,在windows对象中找不到jQuery对象。这里我们可以加这么一句解决。
<script src="/UploadFiles/2021-04-02/jquery.min.js">回到正题,首先我们在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=x64ps:在非Windows主机平台上进行打包,需要安装Wine 1.6或更高版本
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例