ShotEasy：在浏览器中实现截屏与图像处理的WebAssembly全能工具
ShotEasy：在浏览器中实现截屏与图像处理的WebAssembly全能工具
项目介绍
在日常工作和生活中，我们经常需要进行截图、图片编辑、格式转换、PDF处理等操作。传统方案要么需要安装重量级软件，要么需要将文件上传到第三方服务器，存在隐私泄露风险。而 ShotEasy 的出现完美解决了这一问题——它是一个完全运行在浏览器中的在线截图与图像处理工具，利用 WebAssembly 技术实现高性能本地处理，让你可以在不上传任何文件到服务器的情况下，完成截图、编辑、转换、OCR 识别等一系列操作。
项目地址：https://github.com/CH563/shot-easy-website
在线体验：https://shoteasy.fun
核心优势
- 隐私安全：所有处理在浏览器本地完成，文件不上传任何服务器
- 完全免费：开源项目，无需付费，无使用限制
- 功能全面：集截图、编辑、格式转换、OCR、PDF处理于一体
- 高性能：基于 WebAssembly 和现代浏览器技术，处理速度快
- 跨平台：只需一个浏览器，Windows、macOS、Linux 均可使用
- Chrome 扩展：提供浏览器扩展，方便快速截图
核心功能
ShotEasy 是一套完整的在线图像处理解决方案，功能覆盖了日常使用的方方面面：
| 功能模块 | 说明 |
|---|---|
| 屏幕截图 | 区域截图、整页截图，支持多种截图方式 |
| 图片编辑 | 在线图片编辑，调整大小、滤镜、裁剪等 |
| 格式转换 | 支持多种图片格式互转，合并图片或PDF页面为长图 |
| 视频转 GIF | 将视频转换为 GIF 动图 |
| 文档查看器 | 在线查看 Office 文档和 PDF 文件 |
| OCR 文字识别 | 基于 PaddleOCR.js 和 PP-OCRv5 的浏览器端文字识别 |
| 可搜索 PDF | 将扫描版 PDF 转换为可搜索的 PDF 文档 |
| 背景移除 | 使用 Hugging Face 模型一键移除图片背景 |
| 图片压缩 | 在浏览器中压缩图片，保持画质的同时减小体积 |
| 长图拼接 | 将多张图片或 PDF 页面合并为一张长图 |
| 截图美化 | 为截图添加美化效果，一键生成精美截图 |
技术架构
核心技术栈
ShotEasy 采用了现代化的前端技术方案：
- 框架：Astro（静态站点生成器）
- 前端框架：React（组件化开发）
- 包管理器：pnpm
- OCR 引擎：PaddleOCR.js + PP-OCRv5[reference:0]
- 背景移除：Hugging Face Xenova/modnet 模型[reference:1]
- 部署平台：Vercel[reference:2]
- 博客系统：Astro Content Collections + 本地 Markdown 文件[reference:3]
WebAssembly 与本地处理
ShotEasy 的核心优势在于所有计算都在浏览器本地完成：
- OCR 模型和 WebAssembly 运行时在首次使用时下载，浏览器缓存可加速后续识别[reference:4]
- 文档图像、渲染的 PDF 页面和识别文本均保留在浏览器内存中，不上传任何文件到 OCR 服务器[reference:5]
- 支持 JPG、PNG、WebP、BMP 和扫描版 PDF 输入[reference:6]
部署教程
准备工作
开始部署前，你需要准备：
- 一个 GitHub 账号
- 一个 Vercel 账号（推荐）或其他静态托管平台账号
- （可选）一个自定义域名
方式一：Vercel 部署（推荐）
Vercel 是项目官方推荐的部署平台[reference:7]，部署过程非常简单。
第 1 步：Fork 仓库
登录 GitHub，打开 ShotEasy 项目仓库，点击右上角的 Fork 按钮，将仓库复制到你的 GitHub 账号下。
第 2 步：导入到 Vercel
- 登录 Vercel
- 点击 Add New → Project
- 选择你刚刚 Fork 的
shot-easy-website仓库 - 保持默认设置，Vercel 会自动识别 Astro 项目
- 点击 Deploy
第 3 步：等待部署完成
部署过程约需 1-2 分钟。完成后，Vercel 会自动生成一个可访问的 URL（如 shot-easy-website.vercel.app）。
第 4 步：（可选）配置环境变量
如需配置密钥，可在 Vercel 项目设置中添加环境变量：
| 变量名 | 说明 |
|---|---|
PUBLIC_SECRET_KEY |
请求密钥[reference:8] |
方式二：Cloudflare Pages 部署
如果你希望使用 Cloudflare 的全球加速网络：
- 登录 Cloudflare 控制台
- 进入 Workers & Pages → 创建应用程序 → Pages
- 点击 连接到 Git，选择你 Fork 的仓库
- 构建命令：
pnpm run build - 输出目录：
dist - 点击 保存并部署
方式三：Netlify 部署
Netlify 同样支持 Astro 项目的无缝部署：
- 登录 Netlify
- 点击 Add new site → Import an existing project
- 选择 GitHub，选择你 Fork 的仓库
- 构建命令：
pnpm run build - 发布目录：
dist - 点击 Deploy site
方式四：本地开发与预览
在部署之前，你也可以先在本地运行和预览：
# 克隆仓库
git clone https://github.com/CH563/shot-easy-website.git
cd shot-easy-website
# 安装依赖（使用 pnpm）
pnpm install
# 启动本地开发服务器
pnpm run dev
# 构建生产版本
pnpm run build
# 本地预览构建结果
pnpm run preview