--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: --- ## 前言图片压缩是前端开发中很常见的操作，一般常见的有三种方式： - UI 小姐姐压缩好提供给前端（这么贴心的UI小姐姐哪里找~） - PS 等图片处理软件压缩 - 线上网站图片压缩（tinypng 等）但是，今天我们要用js自己写一个桌面应用，用来压缩图片，软件截图如下： ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71a3b711ce0248e3975e08c735929136~tplv-k3u1fbpfcp-watermark.image) 应用特点： - 批量压缩：可以自己配置批量压缩的张数，我们这次定的是100张（tinypng在线一次最多压缩20张） - 压缩速度快 - 压缩质量和tinypng差不多 ## 聊聊技术选型： Electron + Vue3 + Element plus #### Electron：是目前比较火的js构建跨平台应用的框架，之前也使用electron 开发过小型的应用，我个人喜欢electron 的原因基于三点： - 跨平台，一次开发，多平台适用； - 学习成本和开发时间成本低，尤其对于前端开发人员来说； - 内置常用的功能模块，比如我们这次的图片压缩就是用到了electron 内置的 nativeImage 模块 electron的优点还有很多，大家可以移步至electron官网了解，很多我们常用的软件都是使用electron开发的，比如我们前端工程师的饭碗软件之一：vs code 当然，缺点也是有的，应用打包后略大，比如我们这次的图片压缩应用，打包后50多M，即便做了打包优化，包体积也不会很小，这个是electron 本身的底层实现决定的，期待官方可以优化下这个点~ #### Vue3：个人比较喜欢3.0 版本的 Composition API，但是公司现在都是Vue2.x版本，打算拿这个应用练练手~ #### Element Plus：这个主要是懒（捂脸），现成的组件用起来真香~ ## 功能思考 electron 核心分为主进程和渲染进程： - 渲染进程是我们的前端环境，这个项目中就是vue 构建的单页面应用； - 主进程管理渲染进程，并且负责和系统的交互，是渲染进程与系统之间的桥梁；对于图片压缩功能的实现，用户在页面批量选择图片，发送图片路径给主进程，主进程压缩图片并将图片保存在指定目录，将压缩成功或者失败的状态返回给渲染进程，页面提示成功或失败： ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ff556ba6b984c8fa59b8b87cdd60a98~tplv-k3u1fbpfcp-watermark.image) ## 项目构建首先你需要已经安装： - node - npm - vue-cli 下面我们创建项目： ```shell vue create <项目名称> ``` 然后录入项目的信息： ```shell ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? No ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ccfb00f6f1a46f9a8b154264a546a5b~tplv-k3u1fbpfcp-watermark.image) 安装 vue-cli-plugin-electron-builder，electron版本选择^9.0.0： ``` shell cd <项目目录> vue add electron-builder ``` 启动项目： ``` shell npm run electron:serve ``` ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0627f2679aef46aa925a98e4ccacb55c~tplv-k3u1fbpfcp-watermark.image) ## 项目目录初始化的项目中已经有一些页面了，但是我们并不需要，下面我们精简下项目目录： - dist_electron - node_modules - public - index.html - src - router - index.js - styles - base.scss - utils - utils.js - compress-electron.js - views - ImageCompress.vue - App.vue - background.js - main.js - babel.config.js - package.json - README.md ## 开始coding 首先我们安装element-plus ```shell npm install element-plus --save ``` 在main.js 中引入element-plus 和base.scss（base.scss是一些基础样式和公共样式） ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import './styles/base.scss' createApp(App).use(router).use(ElementPlus).mount('#app') ``` 编写路由：router/index.js ```javascript // router/index.js import { createRouter, createWebHashHistory } from 'vue-router' import ImageCompress from '../views/ImageCompress.vue' const routes = [{ path: '/', name: 'ImageCompress', component: ImageCompress, }] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ``` electron 中ipcmian(主进程)、ipcrenderer（渲染进程）负责主进程和渲染进程之间的通信，这需要在vue页面中引入 electron.ipcrenderer，进行引入之前，我们需要在electron的background.js中配置，允许页面集成node 模块 ```javascript // background.js const win = new BrowserWindow({ width: 800, // 应用界面宽度 height: 600, // 应用界面高度 webPreferences: { nodeIntegration: true, //允许页面集成node模块 webSecurity: false,// 取消跨域限制 } }) ``` 现在我们就可以在页面引入electron、path等node模块了，使用 window.require("electron")引入。现在我们来写应用界面和逻辑，界面组件使用element-plus: 压缩质量选择用滑块组件el-slider，图片选择用el-upload组件，页面结构如下： ```html ``` 下面是页面逻辑的编写，用户选择文件、压缩质量后，生成一个文件保存目录，并将文件的系统路径保存在数组中，通过ipcRenderer 传递给主进程，交由主进程中去进行图片处理，主进程处理完成（或失败）后，并且在页面响应由主进程返回的处理状态： - ipcRenderer.send(): 向主进程（ipcMain）发送消息 - ipcRenderer.on(): 响应主进程（ipcMain）推送过来的消息 ```javascript // 页面逻辑 ``` 样式略... 现在需要在主进程中响应页面发送过来的消息，主进程的通信使用ipcMain： ipcMain.on(): 接受页面发送的消息 ```javascript // background.js // 图片压缩：接收页面发来的消息，arg 为消息参数 ipcMain.on('compress-image', async (event, arg) => { // 图片压缩 const status = await imageCompress(arg) // 发送结果给页面 BrowerWindow.webContents.send('compress-status', status) }) ``` 下面，开始压缩图片的逻辑，utils/utils.js 是一些常用方法的封装，utils/compress-electron.js 是图片压缩的逻辑: ```javascript // utils.js import fs from 'fs' // 创建目录，返回创建目录的结果 const mkdir = (path) => { return new Promise((resolve, reject) => { if (fs.existsSync( path )) { resolve(true) return } fs.mkdir(path, (error) => { if (error) { reject(false) } else { resolve(true) } }) }) } export { mkdir, } ``` ```javascript // compress-electron.js import { nativeImage } from 'electron' import path from 'path' import fs from 'fs' import { mkdir } from './utils' const imageCompress = (input, quality) => { quality = quality || 50 const image = nativeImage.createFromPath(input); const res = image.resize({ // 图片压缩质量，可选值：better || good || best quality: 'best' }) console.log(res) // const imageData = res.toPNG() // jpg 压缩图片质量设置 const imageData = res.toJPEG(quality) return imageData; } export default async (options) => { // 创建保存图片目录，失败的话退出 const createDir = await mkdir(options.targetDir) if (!createDir) return { success: false, msg: '创建图片保存目录失败！' } try { options.fileList.map((item) => { const dirParse = path.parse(item) const data = imageCompress(item, options.quality) const targetDir = `${options.targetDir}${path.sep}${dirParse.name}${dirParse.ext}` fs.writeFileSync(targetDir,data) }) return { success: true, msg: `图片压缩成功，保存在 ${options.targetDir} 目录中` } } catch (err) { console.log(err, 'err') return { success: false, msg: `图片压缩失败!`, reason: err } } } ``` 最后，在electron 入口文件background.js 中引入compress-electron.js，并且隐藏顶部的菜单，background.js的完整代码： ```javascript 'use strict' import { app, protocol, BrowserWindow, ipcMain, Menu } from 'electron' import { createProtocol } from 'vue-cli-plugin-electron-builder/lib' import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer' import imageCompress from './utils/compress-electron.js' const isDevelopment = process.env.NODE_ENV !== 'production' // Scheme must be registered before the app is ready protocol.registerSchemesAsPrivileged([ { scheme: 'app', privileges: { secure: true, standard: true } } ]) let BrowerWindow = null async function createWindow() { // Create the browser window. BrowerWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, webSecurity: false,// 取消跨域限制 } }) if (process.env.WEBPACK_DEV_SERVER_URL) { // Load the url of the dev server if in development mode await BrowerWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL) if (!process.env.IS_TEST) BrowerWindow.webContents.openDevTools() } else { createProtocol('app') // Load the index.html when not in development BrowerWindow.loadURL('app://./index.html') } } // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) createWindow() }) // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', async () => { if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools try { await installExtension(VUEJS_DEVTOOLS) } catch (e) { console.error('Vue Devtools failed to install:', e.toString()) } } createWindow() }) // Exit cleanly on request from parent process in development mode. if (isDevelopment) { if (process.platform === 'win32') { process.on('message', (data) => { if (data === 'graceful-exit') { app.quit() } }) } else { process.on('SIGTERM', () => { app.quit() }) } } // 图片压缩：接收页面发来的消息，arg 为消息参数 ipcMain.on('compress-image', async (event, arg) => { const status = await imageCompress(arg) console.log('compress-status') BrowerWindow.webContents.send('compress-status', status) }) ``` 效果图： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09096f42e7cf40ec8328dbc25e369d1b~tplv-k3u1fbpfcp-watermark.image) ## 打包执行命令 ```shell npm run electron:build ``` 不同的电脑，打包速度时间不同，稍等几分钟以后，就可以在项目目录下的dist_electron 文件夹中看到.exe的文件了，这就是我们打包出来的包（mac系统也是这样打包，只是生成的文件后缀不一样），双击运行.exe文件就行了，下面是效果演示： ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1c5acf9eed0422bb7379468b9db7e03~tplv-k3u1fbpfcp-watermark.image) ## 更多功能 electron的nativeImage还可以实现是图片的转格式（png转jpg，jpg转png），图片缩放、裁剪，可以在[官方文档](https://www.electronjs.org/docs/api/native-image)查看api，将公用的方法封装，我写的效果图如下： ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79920ce2776340648d3b4cec932d4d9d~tplv-k3u1fbpfcp-watermark.image) ## 最后文中如有任何错误，欢迎指正~~ 最后感谢全大佬的帮助指导~~