用Vite+Electron搞个微信截图工具（区域截屏工具）

最新推荐文章于 2025-11-14 14:08:48 发布

原创

最新推荐文章于 2025-11-14 14:08:48 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#electron #微信 #javascript

本文介绍了如何使用Electron、Vite和React构建一个截图工具，以提高在多窗口间切换查找信息的效率。开发者首先展示了应用的工作原理，通过主窗口发起截图请求，开启透明全屏的截图窗口，利用Electron的桌面捕获功能截取屏幕并处理图片。接着，文章详细阐述了路由配置、主窗口和截图页面的实现，以及Electron之间的通信方法。最后，提供了源码链接供读者参考和探索。

背景

因为我们日常开发项目的时候，需要和同事对接api和文档还有UI图，所以有时候要同时打开多个窗口，并在多个窗口中切换，来选择自己要的信息，如果api和文档不多的情况还好，但是有时候就是要做大量的页面，为了提升效率我决定自己做一个截图工具，并把自己要的信息截图钉在窗口上。

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

先是截图
截图后的图片展示

工具

nodejs
pnpm
electron
vite
react

实现

原理逻辑

其实也并不难理解，首先是主窗体发起截图请求，然后会打开另一个负责截图透明且全屏的窗体，唤起后透明窗体会让electron截取整个屏幕发给逻辑页面，页面会把图片绘制满屏实现定格效果，然后再用canvas做绘制区域的生成，根据生成出的区域对刚才满屏图片进行裁切导出，最后传递给主窗体去显示还可以存到剪贴板种。

具体的api可以看看官方文档： https://www.electronjs.org/zh/docs/latest/api/desktop-capturer

路由配置

本次开发使用了electron-vite-react，具体构建和配置就是用它的默认配置就好了，值得注意的是，本次需要要做三个窗体，一个主窗体，一个截屏窗体，一个是图片展示窗体，于是索性就引入react-router-dom了。

先来安装一下：

git clone https://github.com/electron-vite/electron-vite-react

pnpm add react-router-dom

pnpm add antd

但是要注意的是，我们需要把路由设置成hash模式，不然本地打包时会无法找到。

    import type { FC } from "react";
    import { Routes, Route } from "react-router-dom";
    import { Provider } from "react-redux";
    import { store } from "@/stores";
    import "./index.scss";

    import Home from "@/pages/home";
    import ShotScreen from "@/pages/shotScreen";
    import ViewImage from "@/pages/viewImage";

    const App: FC = () => (
    	<Provider store={store}>
    		<div className="app">
    			<Routes>
    				<Route path="/" element={<Home />}></Route>
    				<Route path="/shotScreen" element={<ShotScreen />}></Route>
    				<Route path="/viewImage" element={<ViewImage />}></Route>
    			</Routes>