我是如何构建浏览器端背景移除工具的
我有 300 张产品照片需要处理。我需要为一家 Shopify 店铺移除它们的背景。
我不想将这些尚未发布的照片上传到随机的服务器。我想要一个能在浏览器本地运行的解决方案。
我测试了两种不同的方法，看看哪种效果最好。
方法 1：Canvas API
这种方法使用像素操作。你从角落选取一种颜色，并将所有相似的像素设置为透明。
• 优点：速度极快。无需下载额外文件。几乎不占用内存。 • 缺点：如果背景有阴影、渐变或纹理，该方法就会失效。它会产生锯齿状边缘。
方法 2：WebAssembly (WASM) + 机器学习
这种方法通过 ONNX Runtime Web 使用机器学习模型来识别什么是人或物体。
• 优点：可以处理头发、皮毛和复杂的边缘。适用于几乎任何背景。 • 缺点：必须下载一个 8MB 的模型。它会消耗更多的 CPU 和内存。
测试结果
我在 MacBook Pro 上测试了 500 张图像。以下是它们的对比情况：
- Canvas 速度：每张图像 12-18 毫秒。
- WASM 速度：每张图像 180-220 毫秒。
- Canvas 准确率：500 张图像中的 187 张。
- WASM 准确率：500 张图像中的 412 张。
我的解决方案：混合方法
我构建了一个结合两者的工具。它首先尝试 Canvas 方法。如果背景过于复杂，它就会切换到机器学习模型。这样平均每张图像耗时 40 毫秒。
给你的技术建议：
getImageData()会导致延迟，因为它需要将数据从 GPU 移动到 CPU。请批量处理你的操作以节省时间。- 在 ONNX Runtime 中使用 WebGL 后端，速度可提升 3-5 倍。
- 模型请坚持使用 256x256 的输入尺寸。对于产品照片来说，更大的尺寸会让处理速度变慢 4 倍，却不会带来足够的收益。
如果你需要快速处理简单的照片，请使用 Canvas。如果你需要高质量，请使用机器学习。
可选的学习社区：https://t.me/GyaanSetuAi