简短说明
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 使用 FileReader 或 Blob.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 标签页
- 在新标签页中打开 RoundCut。
- 打开 DevTools(F12 或右键 → 检查),切换到 Network 标签页。
- 点击 Network 标签页中的”清除”按钮,重新开始记录。
- 使用任意工具:上传图片、编辑、下载结果。
- 查看 Network 日志。您会看到 HTML、CSS、JS、字体以及(首次使用较重工具时)相关 WebAssembly 模块的请求。您不会看到任何包含您图片字节数据的请求。
“Initiator”列显示触发每个请求的脚本,“Type”列显示发送的内容。 用”Fetch/XHR”过滤以聚焦数据请求;您会发现它们都很小,都指向静态源,没有一个包含您的文件。
方法 2 — 离线使用工具
- 加载任意 RoundCut 工具页面,使用一次以确保相关 WebAssembly 模块已缓存。
- 打开 DevTools,进入 Network 标签页,勾选 离线 复选框(或直接关闭 Wi-Fi)。
- 重新加载页面。它仍然能加载,因为浏览器已缓存静态资源。
- 从头到尾再次使用工具。它仍然正常工作。
如果工具在离线状态下工作,那么从定义上说,它在操作过程中没有联系任何服务器。 这是最有力的证明——处理发生在您的机器上,因为没有其他机器可达。
我们能看到什么
明确说明收集的内容:当您加载页面时,我们的分析提供商 (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 时(如 showSaveFilePicker、OffscreenCanvas),我们使用它;
不支持时则回退到旧的等效方案。没有”您的浏览器不受支持”的拦截页面。
唯一的硬性要求是 JavaScript。禁用 JavaScript 后工具无法运行——因为没有服务器端回退, 而处理图像的服务器本就不存在。
问题反馈
还有我们未涉及的内容?发邮件至 support@araluma.com。欢迎技术问题。