RoundCut 如何运作

技术细节说明工具完全在您的浏览器中运行——以及您如何自行验证这一点。

简短说明

RoundCut 使用两个浏览器原生 API 在您的浏览器中运行所有工具: HTML5 Canvas API 用于像素级操作, WebAssembly 用于更重的任务——图像格式的编解码和 AI 推理。 没有任何文件被上传,没有任何内容在我们的服务器上处理,因为我们没有接触您文件的服务器。

您可以在大约 30 秒内验证这一点:打开浏览器的 DevTools,切换到 Network 标签页,清空日志,然后使用任意工具。 您看到的所有网络请求都只是静态站点资源——HTML、CSS、JavaScript、字体以及 WebAssembly 模块。 您的图片从不会离开页面。

为什么选择客户端处理

大多数在线图像工具的工作方式恰恰相反:您上传,服务器处理,您下载结果。 这种模式有几个众所周知的缺点——您的文件存放在别人的机器上,您要等待两次往返, 运营方按 CPU 秒付费,这就是为什么这些服务往往会添加账户体系、水印或付费套餐。

多年来,浏览器已经能够原生完成这些工作的大部分。<canvas> 元素处理裁剪、旋转、缩放和重新编码; WebAssembly 让我们能以接近原生的速度运行 Squoosh 使用的相同 C/Rust 库——MozJPEG、libwebp、libavif 和 Oxipng。 到 2026 年重建版发布时,浏览器实际上已经赶上了桌面图像编辑工具集。已经没有理由再依赖服务器了。

结果是一个具有三个相互叠加特性的技术栈:隐私 (您的文件永远不会离开您的设备)、速度(无需上传、无需排队、 无需服务器往返)和成本(无论有多少人使用,我们都只需花几分钱每月从 CDN 提供静态资源)。

处理流程详解

1. 您选择文件

当您通过文件选择器、拖放或粘贴选择图片时,浏览器会将一个 File 对象传递给 JavaScript。 JavaScript 使用 FileReaderBlob.arrayBuffer() API 读取字节。 在这一步中,文件不会通过网络发送。

2. 浏览器解码图像

现代浏览器可以原生解码 JPG、PNG、WebP、GIF、AVIF,以及(在 Safari 和最新版 Chromium 中)HEIC。 我们使用 createImageBitmap() 在主线程之外将原始字节转换为 GPU 可以处理的位图。 对于不支持 HEIC 原生解码的浏览器,我们退而使用在浏览器本地运行的 WebAssembly 解码器。

3. 工具执行处理

接下来发生的事情取决于具体工具。RoundCut 目前提供三种:

  • Circle Crop — 使用圆形裁剪路径的 Canvas 2D 像素变换。位图以所选旋转角度和缩放比例绘制到 <canvas> 上,应用圆形裁剪后,圆圈内部的内容作为 ImageData 读回。交互式裁剪框由 Cropper.js 处理。
  • Compress — 使用 jSquash WebAssembly 模块(MozJPEG、libwebp、libavif、Oxipng)重新编码 JPG、PNG、WebP 或 AVIF。这些是 Squoosh 使用的相同上游编解码器。它们在 Web Worker 中运行,确保多百万像素照片编码期间界面保持响应,并排预览让您在确认前看清质量与体积的权衡。
  • Remove Background — 一个小型 ONNX 格式 AI 模型(几 MB,下载一次后缓存)通过 ONNX Runtime Web 在您的浏览器中运行,以 WebAssembly 作为执行后端。首次运行时下载模型,之后每次运行都是本地即时处理。

4. 您下载结果

输出位图被编码为 Blob,包装成 object URL,提供给浏览器的标准文件保存对话框。 在受支持的情况下,我们使用 File System Access API, 让您可以直接选择保存目录。文件出现在您的磁盘上,没有任何内容经过服务器。

如何自行验证

“不上传”的说法可以在两分钟内验证。选择您喜欢的任一方法:

方法 1 — 观察 Network 标签页

  1. 在新标签页中打开 RoundCut。
  2. 打开 DevTools(F12 或右键 → 检查),切换到 Network 标签页。
  3. 点击 Network 标签页中的”清除”按钮,重新开始记录。
  4. 使用任意工具:上传图片、编辑、下载结果。
  5. 查看 Network 日志。您会看到 HTML、CSS、JS、字体以及(首次使用较重工具时)相关 WebAssembly 模块的请求。您不会看到任何包含您图片字节数据的请求。

“Initiator”列显示触发每个请求的脚本,“Type”列显示发送的内容。 用”Fetch/XHR”过滤以聚焦数据请求;您会发现它们都很小,都指向静态源,没有一个包含您的文件。

方法 2 — 离线使用工具

  1. 加载任意 RoundCut 工具页面,使用一次以确保相关 WebAssembly 模块已缓存。
  2. 打开 DevTools,进入 Network 标签页,勾选 离线 复选框(或直接关闭 Wi-Fi)。
  3. 重新加载页面。它仍然能加载,因为浏览器已缓存静态资源。
  4. 从头到尾再次使用工具。它仍然正常工作。

如果工具在离线状态下工作,那么从定义上说,它在操作过程中没有联系任何服务器。 这是最有力的证明——处理发生在您的机器上,因为没有其他机器可达。

我们能看到什么

明确说明收集的内容:当您加载页面时,我们的分析提供商 (Cloudflare Web Analytics) 记录某个浏览器从某个国家加载了该 URL。 没有 Cookie,没有持久标识符,没有与任何人绑定的信息。

对于首次使用时需要下载 WebAssembly 模块的工具(jSquash 编解码器、ONNX 背景移除模型), 我们的托管提供商会看到有人获取了该模块——就像看到有人获取 CSS 文件一样。 模块本身不包含任何关于您图片的信息。

完整的数据清单在我们的隐私政策中。

技术栈

以下是 RoundCut 的构建技术,供感兴趣的朋友参考:

  • Astro — 静态站点生成器。每个页面以纯 HTML 发布,仅在有交互工具的地方使用渐进增强的 JavaScript”岛屿”。
  • 原生 CSS 与自定义属性 — 无 Tailwind,无 CSS-in-JS。完整的设计系统只有一个 tokens.css 文件。
  • jSquash — MozJPEG、libwebp、libavif 和 Oxipng 的 WebAssembly 绑定,用于图像编码。
  • Cropper.js — 裁剪工具的矩形交互层。
  • ONNX Runtime Web — 通过 WebAssembly 在浏览器中运行背景移除模型。
  • Cloudflare Pages — 托管静态构建,从边缘节点提供服务,并提供 DNS 和 DDoS 防护。
  • Cloudflare Web Analytics — 无 Cookie 的聚合页面浏览量统计。

浏览器支持

所有工具在 Chrome、Firefox、Safari 和 Edge 的当前版本和上一个版本中均可运行——桌面端和移动端皆支持。 网站采用渐进增强方式:在浏览器支持较新 API 时(如 showSaveFilePickerOffscreenCanvas),我们使用它; 不支持时则回退到旧的等效方案。没有”您的浏览器不受支持”的拦截页面。

唯一的硬性要求是 JavaScript。禁用 JavaScript 后工具无法运行——因为没有服务器端回退, 而处理图像的服务器本就不存在。

问题反馈

还有我们未涉及的内容?发邮件至 support@araluma.com。欢迎技术问题。