如何在Electron应用中获取文件夹路径并处理其中图片？

1. 用Electron原生对话框获取文件夹路径 #

浏览器的input元素会自动选中文件夹内所有文件，不符合仅需路径的需求。Electron提供的dialog模块可以直接让用户选择文件夹并返回路径，更适合这个场景。

在主进程（如main.js）中通过IPC监听渲染进程请求，调用系统对话框：

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });
  mainWindow.loadFile('index.html');
}

// 监听渲染进程的文件夹选择请求
ipcMain.handle('select-folder', async () => {
  const result = await dialog.showOpenDialog(mainWindow, {
    properties: ['openDirectory'], // 限制只能选择文件夹
    title: '选择要扫描的图片文件夹'
  });

  if (!result.canceled && result.filePaths.length > 0) {
    return result.filePaths[0]; // 返回选中的文件夹路径
  }
  return null;
});

app.whenReady().then(createWindow);

2. 预加载脚本暴露IPC通信接口 #

为了安全实现主进程与渲染进程的交互，通过预加载脚本（preload.js）暴露调用方法：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  selectFolder: () => ipcRenderer.invoke('select-folder')
});

3. 渲染进程触发选择并处理扫描逻辑 #

在index.html中添加交互按钮，触发文件夹选择后执行图片扫描：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图片合规检查工具</title>
</head>
<body>
  <button id="selectFolderBtn">选择文件夹</button>
  <div id="resultContainer"></div>

  <script>
    const selectBtn = document.getElementById('selectFolderBtn');
    const resultContainer = document.getElementById('resultContainer');

    selectBtn.addEventListener('click', async () => {
      const folderPath = await window.electronAPI.selectFolder();
      if (!folderPath) return;

      resultContainer.innerHTML = '正在扫描图片，请稍候...';
      const invalidImages = await scanImages(folderPath);
      
      // 展示检查结果
      resultContainer.innerHTML = `
        <h3>不符合规范的图片</h3>
        ${invalidImages.length > 0 ? 
          invalidImages.map(img => `<p>${img.path} - 问题：${img.reason}</p>`).join('') : 
          '<p>所有图片均符合规范</p>'
        }
      `;
    });
  </script>
</body>
</html>

4. 扫描图片并检查合规参数 #

使用Node.js的fs模块递归遍历文件夹，借助sharp库高效获取图片元数据（分辨率、DPI、大小等）：

首先安装依赖：

npm install sharp

实现扫描与检查函数（可放在渲染进程或主进程，大文件夹建议放主进程避免阻塞UI）：

const fs = require('fs').promises;
const path = require('path');
const sharp = require('sharp');

// 自定义合规规则，可按需调整
const COMPLIANCE_RULES = {
  minWidth: 1920,
  minHeight: 1080,
  maxSizeMB: 5,
  minDpi: 72
};

async function scanImages(folderPath) {
  const invalidImages = [];
  const files = await fs.readdir(folderPath, { withFileTypes: true });

  for (const file of files) {
    const fullPath = path.join(folderPath, file.name);
    
    // 递归扫描子文件夹
    if (file.isDirectory()) {
      const subFolderInvalid = await scanImages(fullPath);
      invalidImages.push(...subFolderInvalid);
      continue;
    }

    // 筛选图片格式
    const ext = path.extname(file.name).toLowerCase();
    if (!['.jpg', '.jpeg', '.png', '.webp', '.gif'].includes(ext)) continue;

    try {
      // 获取图片元数据
      const metadata = await sharp(fullPath).metadata();
      // 获取文件大小（转换为MB）
      const stats = await fs.stat(fullPath);
      const sizeMB = (stats.size / (1024 * 1024)).toFixed(2);

      // 检查合规性
      const issues = [];
      if (metadata.width < COMPLIANCE_RULES.minWidth || metadata.height < COMPLIANCE_RULES.minHeight) {
        issues.push(`分辨率不足（${metadata.width}x${metadata.height}，要求≥${COMPLIANCE_RULES.minWidth}x${COMPLIANCE_RULES.minHeight}）`);
      }
      if (parseFloat(sizeMB) > COMPLIANCE_RULES.maxSizeMB) {
        issues.push(`文件过大（${sizeMB}MB，要求≤${COMPLIANCE_RULES.maxSizeMB}MB）`);
      }
      if (metadata.density && metadata.density < COMPLIANCE_RULES.minDpi) {
        issues.push(`DPI不足（${metadata.density}，要求≥${COMPLIANCE_RULES.minDpi}）`);
      }

      if (issues.length > 0) {
        invalidImages.push({
          path: fullPath,
          reason: issues.join('；')
        });
      }
    } catch (err) {
      console.error(`处理图片失败：${fullPath}`, err);
      invalidImages.push({
        path: fullPath,
        reason: '无法读取图片信息'
      });
    }
  }

  return invalidImages;
}

注意事项 #

• 大文件夹扫描时，建议在主进程执行并通过IPC传递进度，避免渲染进程卡顿。
• Electron默认具备文件系统访问权限，打包后无需额外配置权限。
• 可根据需求扩展规则，比如支持更多图片格式、添加颜色模式检查等。

内容的提问来源于stack exchange，提问作者Eujenio Gonzalez