使用 Electron、Vite、ViewerJS 和 React 开发图片预览桌面应用

背景

最近正在做一个开源的项目–pear-rec，pear-rec 是一个跨平台的截图、录屏、录音、录像软件。截图功能上篇文章已经讲过了，如果没有看过的可以去看看这篇文章————手把手教你，用electron实现截图软件，开发到现在我想要一个图片预览功能，说干就干，下面我介绍一下我的开发过程。

在做之前先看看最终展示效果吧：

工具

• nodejs
• pnpm
• electron
• vite
• react
• antd
• viewerjs

实现

原理逻辑

在上一篇文章我们已经搭建了一个vite + electron 的项目了，所以在这里我就不再讲如何搭建项目了（不会的同学可以看《手把手教你，用electron实现截图软件》），其实实现图片预览也并不难理解，首先是在主窗体选择要预览的图片，然后会打开另一个负责预览图片的窗口，然后通过web页面操作图片并实现放大、缩小等功能。

主窗体

我们先准备好主页面Home，里面很简单，就是放入一个按钮然后点击按钮开开弹框选择图片。

如图：

因为我们是用electron，所以在选择图片的组件上我选用了electron 的 dialog方法来实现，当然了，你也可以用input 标签 + change 事件来实现。

// ipcRenderer
invokeViGetImgs: () => ipcRenderer.invoke("vi:get-imgs", "选择图片"),

// ipcMain
ipcMain.handle("vi:get-img", async (event, title) => {
   
   
		let res = await dialog.showOpenDialog({
   
   
			title: title,
			buttonLabel: "按此打开文件",
			properties: ["openFile"],
			filters: [
				{
   
    name: "图片", extensions: ["jpg", "jpeg", "png", "webp", "svg"] },
			],
		});
		res.filePaths.map((filePath, index) => {
   
   
			setHistoryImg(filePath);
		});
		const img = getHistoryImg();
		return img;
	});

这样我们就获取到了一个图片的地址。

预览图片窗体

• 1. 路由

@/router.tsx

const ViewImage = lazy(() => import("@/pages/viewImage"));

<Route path="/viewImage" element={
   
   <ViewImage />}></Route>

• 2.安装插件

pnpm i viewerjs -S 
pnpm i antd -S 
<