如何在浏览器中无需服务器和订阅即可去除图片背景

每次需要为个人项目、产品卡片或头像快速去除照片背景时，同样的麻烦就开始了。像 Remove.bg 这样的热门在线服务，在三次下载后就会要求付费订阅，或者将图片压缩到邮票大小，或者要求 Google 授权。此外，你并不总是想将个人照片或工作模型发送到第三方服务器。

最近我发现了开发者 Suvink 的 cut-it-out 仓库。这是一个开源工具，可以完成同样的工作，但直接在用户机器的浏览器中运行。无需后端、无需排队，第三方基础设施成本为零。

CutItOut Demo

技术原理

该项目的主要亮点是所有计算都在客户端进行。该仓库使用 @imgly/background-removal 库，通过 ONNX Runtime 在 WebAssembly (WASM) 中加载 U2-Net 神经网络模型。

以前运行分割网络的推理需要配备 Python、PyTorch 和至少一块入门级 GPU 的服务器，现在 WASM + WebGL/WebGPU 技术栈在 Chrome 或 Firefox 浏览器标签页中就能处理这些任务。

首次打开页面时，浏览器会下载模型权重并缓存，然后本地处理输入文件。数据不会传输到任何地方。你可以断开笔记本电脑的网络连接，将图片拖入窗口，几秒钟内仍能生成蒙版。

神经网络在复杂边界处经常出错。细发丝、透明玻璃或半模糊的背景往往会变成锯齿状边缘。CutItOut 的开发者没有局限于单一的“去除背景”按钮，而是添加了多个实用的手动修正工具：

魔法画笔。通过颜色相似性选择相邻像素，有助于快速擦除残留的背景碎片。
带半透明图层的恢复模式（Ghost overlay）。当神经网络裁剪过多时，很难盲目恢复需要的部分。这里原始图像会用柔和的轮廓高亮显示，让你准确看到需要涂抹的位置。
画布导航。支持缩放和平移，可以在高分辨率下整洁地清理细节。
无损导出。完成的结果以 PNG 格式交付，带有透明 alpha 通道，保持原始分辨率，无水印或等待计时器。

代码库使用 TypeScript 编写，采用标准前端工具链构建。要在本地运行项目或将其作为自己服务的基础，需要 Node.js 18+ 和 npm 9+。

克隆仓库并进入目录：

git clone https://github.com/Suvink/cut-it-out.git
cd cut-it-out

安装依赖：

npm install

启动本地开发服务器：

npm run dev

Vite 会在 http://localhost:5173 启动应用。

如果想自行部署应用，项目可以用一条命令构建为静态文件：

npm run build

所有完成后的文件会放在 dist 目录中。由于项目完全不需要后端，你可以将这些文件上传到任何免费静态托管服务，如 Vercel、Netlify 或 GitHub Pages。无需设置 Docker 容器、包含 API 密钥的环境变量或 Celery 队列配置。

CutItOut 的代码从两个角度来看都很有价值。

首先，它是一个便捷的现成工具，适合个人使用。你可以在家用服务器上运行它，或者将其加入书签，以便在需要处理几十张图片时避免为商业替代方案付费。

其次，这个项目是前端边缘计算方法的一个很好的范例。如果你在构建一个用户上传头像或产品照片的应用，将分割工作转移到客户端可以节省相当多的成本。不必为云 GPU 实例付费，而是将工作转移到用户的 CPU 上。在仓库中，你可以看到作者如何组织画布操作、缩放以及将 WASM 库集成到界面中。

CutItOut 是一个基于 Apache 2.0 许可证的简洁可靠的项目。它解决了一个具体的日常问题，并清楚地展示了浏览器机器学习能力的发展程度。这个项目的星标数还不多，但代码干净、易懂，而且易于适应你自己的任务。