技术博客：用 JavaScript 构建右键菜单工具

前端

2023-12-29 20:43:25

前言

在日常开发中，我们经常需要对图片进行压缩，以减小图片大小并提高加载速度。传统的方法是使用命令行工具，比如常见的 pngquant 和 jpegoptim。然而，对于不熟悉命令行操作的用户来说，使用这些工具可能存在一定的门槛。

为了解决这个问题，本文介绍了一种基于 JavaScript 的右键菜单工具，该工具可以方便地通过右键菜单对图片进行压缩。该工具使用 Node.js 开发，并结合了命令行和右键菜单两种交互方式，为用户提供了便捷高效的操作体验。

实现原理

该工具的实现原理如下：

首先，我们需要安装必要的依赖库。
然后，我们需要创建一个右键菜单项，并在该右键菜单项中添加一个事件监听器，当用户点击该右键菜单项时，触发相应的事件。
在事件监听器中，我们需要获取当前选中的图片文件，并将其路径传递给命令行工具。
命令行工具收到图片路径后，将对图片进行压缩，并保存到指定的位置。
最后，我们将压缩后的图片路径返回给右键菜单工具，并在右键菜单中显示压缩后的图片。

代码实现

// 首先，我们需要安装必要的依赖库。
const fs = require('fs');
const path = require('path');
const { spawn } = require('child_process');

// 然后，我们需要创建一个右键菜单项。
const menu = new Menu();
menu.append(new MenuItem({
  label: 'Compress Image',
  click: async () => {
    // 获取当前选中的图片文件。
    const files = await dialog.showOpenDialog({
      properties: ['openFile'],
      filters: [
        { name: 'Images', extensions: ['jpg', 'png', 'gif'] }
      ]
    });

    // 将图片路径传递给命令行工具。
    const child = spawn('pngquant', [files[0]]);

    // 监听命令行工具的输出。
    child.stdout.on('data', (data) => {
      // 将压缩后的图片路径返回给右键菜单工具。
      menu.append(new MenuItem({
        label: 'Compressed Image',
        click: () => {
          // 在右键菜单中显示压缩后的图片。
          shell.openPath(data.toString());
        }
      }));
    });
  }
}));

// 最后，我们需要将右键菜单添加到应用程序中。
Menu.setApplicationMenu(menu);