在工作中和生活中，图片压缩变简单，electron写图片压缩桌面程序

2023-12-18 06:37:52

人生旅途中，难免会遇到需要压缩图片的情况。特别是在工作或生活中，上传图片时，经常会遇到文件大小的限制。而传统的图片压缩方法，通常需要打开图片编辑工具，进行另存为的操作，十分麻烦。为了简化这一流程，我们可以使用electron编写一个图片压缩的桌面程序，只需简单的几步操作，即可轻松完成图像的压缩。

1. electron快速入门

首先，需要安装electron，这是用于构建跨平台桌面应用程序的框架。可以在electron的官方网站上下载相应的安装包，按照安装指南进行安装即可。

安装完成后，可以通过以下命令创建一个新的electron项目：

npx create-electron-app your-app-name

2. electron项目结构

创建好项目后，可以在项目目录下看到以下文件：

main.js：这是electron应用程序的主文件，负责应用程序的启动和运行。
package.json：这是项目的配置文件，包含了应用程序的名称、版本、依赖项等信息。
src/index.js：这是应用程序的入口文件，负责创建应用程序的窗口并加载相关资源。
src/index.html：这是应用程序的主窗口的HTML文件，负责显示应用程序的界面。
src/main.css：这是应用程序的主窗口的CSS文件，负责定义应用程序的样式。

3. 添加图片压缩功能

接下来，需要在项目中添加图片压缩功能。首先，需要在项目中安装一个图片压缩库，例如imagemin。可以使用以下命令安装：

npm install imagemin

安装完成后，可以在src/index.js文件中添加以下代码：

const imagemin = require('imagemin');
const imageminJpegtran = require('imagemin-jpegtran');
const imageminPngquant = require('imagemin-pngquant');

// 选择要压缩的图片
const inputFile = 'path/to/input.jpg';

// 选择压缩后的图片输出路径
const outputFile = 'path/to/output.jpg';

// 使用imagemin对图片进行压缩
imagemin([inputFile], outputFile, {
  plugins: [
    imageminJpegtran(),
    imageminPngquant()
  ]
});

这段代码首先导入必要的库，然后选择要压缩的图片和压缩后的图片输出路径。最后，使用imagemin库对图片进行压缩。

4. 创建应用程序窗口

添加完图片压缩功能后，需要创建应用程序窗口。可以在src/index.js文件中添加以下代码：

const {app, BrowserWindow} = require('electron');

// 当应用程序准备好时创建浏览器窗口
app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 加载应用程序的主窗口HTML文件
  mainWindow.loadFile('src/index.html');
});

// 当所有窗口都关闭时退出应用程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

这段代码首先导入必要的库，然后在应用程序准备好时创建一个浏览器窗口。最后，当所有窗口都关闭时退出应用程序。

5. 在HTML文件中添加界面元素

接下来，需要在src/index.html文件中添加界面元素。可以在其中添加一个按钮和一个文件输入框，用于选择要压缩的图片。还可以添加一个进度条，用于显示图片压缩的进度。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>图片压缩</h1>
  <input type="file" id="input-file">
  <button id="compress-button">压缩</button>
  <div id="progress-bar"></div>
</body>
</html>

6. 在JavaScript文件中添加事件监听器

最后，需要在src/index.js文件中添加事件监听器，以便在用户点击按钮时触发图片压缩功能。可以在其中添加以下代码：

const inputFile = document.getElementById('input-file');
const compressButton = document.getElementById('compress-button');
const progressBar = document.getElementById('progress-bar');

// 在用户点击按钮时触发图片压缩功能
compressButton.addEventListener('click', () => {
  // 显示进度条
  progressBar.style.display = 'block';

  // 选择要压缩的图片
  const files = inputFile.files;
  if (files.length === 0) {
    alert('请选择要压缩的图片');
    return;
  }

  // 使用imagemin对图片进行压缩
  imagemin(files, {
    plugins: [
      imageminJpegtran(),
      imageminPngquant()
    ]
  }).then(() => {
    // 隐藏进度条
    progressBar.style.display = 'none';

    // 提示用户图片压缩已完成
    alert('图片压缩已完成');
  });
});