纯前端抠图指南：@imgly/background-removal 零后端实现
一张照片，点击即可完成抠图。无需后端服务、无需 GPU 服务器、无需调用任何付费 API，浏览器本地直接搞定。在 AMD 5500 这样的老平台上，仅使用 40MB 的量化模型，单次抠图耗时约 8 秒。
核心代码
import { removeBackground } from "https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/+esm"
const file = document.getElementById("file").files[0]
const png = await removeBackground(file)
URL.createObjectURL(png) // 生成本地 Blob URL，可直接预览或下载
选择图片后，几秒内即可生成透明 PNG，图片全程不离开用户设备。
处理流程
上传图片 → 加载 ISNet ONNX 模型 → WebGPU / WebGL / WASM 推理 → 输出透明 PNG（Blob）→ 棋盘格预览 + 下载
1. 为什么选择浏览器本地抠图？
1.1 痛点的解决
对于电商从业者来说，日常频繁抠图是刚需。使用 Photoshop 逐张处理，抠头发、花边等精细部位，半小时才能完成一张。而在线抠图工具通常需要将图片上传到第三方服务器，不仅存在隐私泄漏风险，还往往需要付费。
@imgly/background-removal 提供了一种全新的方案：纯前端、零后端，直接在浏览器本地完成全部图像处理。
1.2 包简介
该库在 GitHub 上已有约 6.8k Star。底层基于 ONNX Runtime Web，推理模型采用 ISNet（专门用于图像分割的模型）。
模型规格：
| 模型 | 大小 | 特点 |
|---|---|---|
isnet_fp16 | ~80MB | 默认推荐，精度最高，发丝细节出色 |
isnet_quint8 | ~40MB | 量化版，速度快，精度略有损失，人像/物品抠图均够用 |
设备自动选择推理后端：WebGPU → WebGL → WASM。有显卡则使用 WebGPU 加速，无显卡则自动降级为 CPU 推理，开发者无需编写兼容代码。
1.3 CDN 引入
<script type="module">
import { removeBackground } from "https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/+esm"
</script>
通过 jsDelivr 的 +esm 自动打包，国内可直连。无需 npm 配置，无需设置 publicPath，库会自动从 CDN 加载模型文件。
1.4 模型精度选择
isnet_fp16（80MB）：精度最高，适合人像发丝细节处理。isnet_quint8（40MB）：量化版本，速度提升约一倍，精度仅有轻微损失，适合物品抠图。在实际使用中，肉眼看不出明显差异。
1.5 设备自动降级
库内部会自动检测并选择最佳推理后端：
- WebGPU：性能最强，有显卡时优先使用。
- WebGL：不支持 WebGPU 时自动降级。
- WASM：连 WebGL 都没有时，纯 CPU 运行。
整个过程完全自动，无需开发者额外处理兼容性。
1.6 进度回调
progress: (key, current, total) => {
const pct = Math.round((current / total) * 100)
// 根据 pct 更新进度条 UI
}
key 参数标识当前阶段：
download：下载模型load：加载模型run：前向推理postprocess：后处理
注意：当 total 为 0 时，表示该阶段没有进度信息，可忽略。
1.7 输出格式配置
// 默认 PNG（透明）
removeBackground(file, { output: { format: "image/png" } })
// JPEG（不透明，体积最小）
removeBackground(file, { output: { format: "image/jpeg", quality: 0.85 } })
// WebP（透明，体积中等）
removeBackground(file, { output: { format: "image/webp", quality: 0.9 } })
1.8 输出类型配置
// 主体（默认）
removeBackground(file, { output: { type: "foreground" } })
// 背景
removeBackground(file, { output: { type: "background" } })
// 黑白遮罩
removeBackground(file, { output: { type: "mask" } })
遮罩图可进一步用于二次处理，例如更换底色。
1.9 换底色示例
拿到的透明 PNG 后，通过 Canvas 合成新底色：
function addColorBg(png, color) {
const img = new Image()
img.onload = () => {
const c = document.createElement("canvas")
c.width = img.width
c.height = img.height
const ctx = c.getContext("2d")
ctx.fillStyle = color
ctx.fillRect(0, 0, c.width, c.height)
ctx.drawImage(img, 0, 0)
c.toBlob(blob => URL.createObjectURL(blob))
}
img.src = URL.createObjectURL(png)
}
addColorBg(png, "#cc0000") // 红底证件照
1.10 浏览器缓存策略
首次调用时会下载约 80MB 的模型文件（使用 quant8 模型则约 40MB）。浏览器会自动将其缓存到 disk cache，第二次打开页面时秒级加载。清除浏览器缓存后需要重新下载。
总结
@imgly/background-removal：纯前端，一行代码即可实现抠图- ISNet 模型：基于 ONNX，人像与物品通吃
- WebGPU 加速：有显卡时最快 3 秒出图
- 棋盘格预览：透明区域一目了然
- 换底色：仅需增加约 10 行 Canvas 代码
- 零后端：图片不离开用户设备，隐私安全
当前版本在背景复杂时可能出现误抠。开发团队计划在未来两天内发布支持手动选取区域的新版本，进一步提升抠图精度和交互体验。