压缩图片桌面应用imagemin-electron基于electron制作节点压缩图片桌面应用下载地址:https://github.com/zenoslin/imagemin-electron/releasesProject源代码Github:https://github.com/zenoslin/imagemin-electron准备工作整理一下我们需要做的事情:压缩图片模块获取文件路径桌面应用生成压缩图片我们需要使用imagemin库来压缩图片,这里我们把这个库打包成一个压缩模块。constimagemin=require('imagemin')constimageminMozjpeg=require('imagemin-mozjpeg')constimageminPngquant=require('imagemin-pngquant')constimageminGifsicle=require('imagemin-gifsicle')异步函数罗盘(输入,输出,opts,callback){letlog=awaitimageminCompass(input,output,opts)callback(log)}异步函数imageminCompass(input,output='temp',opts={}){input=(typeofinput=='string')?[输入]:输入;returnawaitimagemin(input,output,{use:[imageminMozjpeg(opts),imageminPngquant(opts),imageminGifsicle({optimizationLevel:3})]}).then(file=>{返回{status:true,data:file};}).catch(e=>{console.log(e);return{status:false,error:e.toString()}});}module.exports={compass:compass};获取文件路径在我的理解中,electron使用的是chrome浏览器的mini版,然后帮我们实现了浏览器和系统(win&mac)我们正常写网页就可以开发出很多交互api接口。当我们需要与系统进行交互时,只需要抛出一个事件,然后在electron的主进程中监听,接收到事件后调用相应的api接口,将结果依次抛给渲染进程中事件的形式。electron的安装和学习可以在官网https://electronjs.org/学习。ps:这里有个电子坑。electron和jquery有冲突,所以直接用script标签导入会失败,在windows对象中找不到jQuery对象。这里我们可以加这么一句来解决。回到正题,首先我们在index.html中添加一个按钮,用于打开系统的路径选择器。选择路径在渲染过程renderer.js中,监听按钮的点击,监听主线程返回的事件。const{ipcRenderer}=require('electron')constinputBtn=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=pathinputPath.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.jsconstholder=document.getElementById("holder")holder.ondragenter=holder.ondragover=(event)=>{event.preventDefault()holder.className="jumbotronholder-ondrag"}holder。ondragleave=(event)=>{event.preventDefault()holder.className="jumbotronholder"}holder.ondrop=(event)=>{//调用preventDefault()避免浏览器默认处理数据//(the放置事件的默认行为是打开链接event.preventDefault()holder.className="jumbotronholder"varfile=event.dataTransfer.files[0]_inputPath=inputPath.value=file.path}将我们获取到的文件路径传递给前面写的压缩文件模块,这样我们就可以完成图片压缩桌面应用的生成最后,我们使用electron-packager完成electron桌面应用程序的打包。//macelectron-包装器。--out=out--platform=mas--arch=x64//winelectron-packager。--platform=win32--arch=x64ps:要在非Windows主机平台上打包,需要安装Wine1.6或更高版本