媒体工具
English

background-removal-js:7K星纯浏览器抠图库,不用上传图片就能去背景

IMG.LY 开源的浏览器端背景移除库,7.1K star,基于 ONNX 运行,无需服务器,保护隐私,适合电商和创意工具。

图像处理抠图javascriptonnx前端隐私

广告

background-removal-js:7K星纯浏览器抠图库,不用上传图片就能去背景

以前我做抠图,要么开 Photoshop 慢慢描,要么把图片上传到某个在线工具。在线工具虽然快,但总担心隐私问题——产品图还没发布就先传到别人服务器上,怎么想都不太放心。background-removal-js 这个库就是来解决这个痛点的。

这项目是什么

background-removal-js 是 IMG.LY 开源的一个纯浏览器端背景移除库,TypeScript 写的,7.1K star。它的特点很鲜明:所有计算都在浏览器本地完成,基于 ONNX 模型运行,不需要把图片上传到任何服务器。

IMG.LY 本身是做图片编辑 SDK 的厂商,PhotoEditor SDK 就是他们家的。所以他们开源这个库,专业性是有保证的。

核心亮点

纯前端运行。 图片不用离开用户设备,对隐私敏感的场景特别友好。电商产品图、证件照、设计素材这些都不适合随便上传。

无需额外成本。 没有后端服务器,自然也就没有 API 调用费用。用户量大的时候,这个优势很明显。

效果够用。 虽然比不上专业设计师手工抠,但对人物、产品这类常见主体,边缘处理已经相当自然。做缩略图、商品主图、社交头像完全够。

API 简单。 几行代码就能集成:

import { removeBackground } from '@imgly/background-removal';

const blob = await removeBackground('/path/to/image.png');
const url = URL.createObjectURL(blob);

支持配置。 可以调整输出质量、格式、模型精度,在速度和效果之间做权衡。

怎么用

npm 安装:

npm install @imgly/background-removal

然后在项目里调用:

import { removeBackground } from '@imgly/background-removal';

async function processImage(file) {
  const blob = await removeBackground(file, {
    output: {
      format: 'image/png',
      quality: 0.8
    }
  });
  return URL.createObjectURL(blob);
}

模型文件会在首次使用时自动下载,大概几十 MB。后续就可以离线运行了。

优缺点

优点:

  • 纯浏览器运行,隐私安全
  • 无需后端服务器,零 API 成本
  • 集成简单,几行代码搞定
  • 效果对于常见场景足够好
  • 输出格式和质量可配置
  • 开源免费,可商用

缺点:

  • 首次加载模型需要下载,体积不小
  • 低端设备上推理速度较慢
  • 复杂背景或毛发细节处理不如专业软件
  • 只能处理单张图片,批量处理需要自己做队列
  • 模型精度高的设置下,内存占用较大

跟别的抠图方案比比

方案隐私成本效果集成难度适用场景
background-removal-js✅ 本地免费中等隐私敏感、前端集成
remove.bg API❌ 上传按量付费很好高质量商业用途
Photoshop✅ 本地付费最好专业设计
Python rembg✅ 本地免费中等后端批量处理
在线工具❌ 上传部分免费中等极低临时使用

如果你做的是需要保护用户隐私的 Web 应用,比如证件照生成器、电商 P 图工具,background-removal-js 是非常合适的方案。

适合谁

三类场景比较合适:

  1. 前端工具类产品——图片编辑器、海报生成器、头像制作工具
  2. 电商 SaaS——商品图批量处理、白底图生成
  3. 隐私敏感场景——证件照、医疗影像、内部资料处理

我测试过用它处理几十张产品图,大部分效果都能直接用,少数复杂边缘的再手动修一下。对于不想搭建后端图像服务的团队来说,省了很多事情。


关于作者

柳钉鱼,全栈开发者,GitHub 重度用户。过去 3 年 Star 了 900+ 仓库,这里只写我真正用过或深度调研过的工具。

📧 发现好工具想推荐?发邮件到 [email protected]

广告

相关文章