用Vite+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>