图片预览，pear-rec助力实现跨平台多功能预览#

2023-10-05 22:56:06

## 用 Electron、Vite、ViewerJS 和 React 构建功能强大的图片预览软件

跨平台图像浏览的艺术

大家好，我是开源项目的狂热爱好者。我最近致力于一个名为 pear-rec 的开源项目，这是一个跨平台的截图、录屏、录音和录像软件。为了进一步提升它的功能，我决定加入一个图像预览功能。在这篇文章中，我将详细介绍我如何使用 Electron、Vite、ViewerJS 和 React 等技术打造出这款功能强大的图像预览软件。

技术栈概览

Electron ：跨平台开发框架，使用 JavaScript、HTML 和 CSS 构建桌面应用程序。
Vite ：前端构建工具，采用增量编译技术，显著提高开发效率。
ViewerJS ：轻量级开源图片查看器，支持多种图片格式和丰富的功能。
React ：用于构建用户界面的 JavaScript 库，具有强大的组件化特性。

开发历程

安装依赖项

npm install electron vite viewerjs react

创建 Electron 项目
```
electron-quick-start --type=module
```

配置 Vite
修改 vite.config.js 文件，指定构建目标为 Electron 渲染器。

// vite.config.js
export default {
  build: {
    target: 'electron-renderer',
    outDir: 'build/renderer',
  },
};

配置 Electron
在 main.js 文件中，配置 Electron 应用程序窗口。

// main.js
const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  win.loadFile('build/renderer/index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

编写 React 组件
创建 App.js 文件，用于处理图像预览逻辑。

// App.js
import { useState } from 'react';
import Viewer from 'viewerjs';

const App = () => {
  const [image, setImage] = useState(null);

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = () => {
      setImage(reader.result);
    };

    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input type="file" onChange={handleImageUpload} />
      {image && <Viewer image={image} />}
    </div>
  );
};

export default App;