如何一键去除图片背景？在浏览器本地跑模型的原理

一键去背景的核心是把图片分成前景和背景，然后把背景像素变成透明。

现代去背景工具通常使用图像分割模型。模型会预测每个像素属于前景的概率，再生成一张 alpha mask，用它决定哪些区域保留、哪些区域透明。

本地模型处理流程

1. 浏览器读取图片并解码成像素。
2. 模型在本地推断前景区域。
3. 生成透明度遮罩，也就是 alpha mask。
4. 把背景像素设为透明，保留主体。
5. 导出透明 PNG，方便继续设计或排版。

当前 /image/remove-bg 的实现细节

ToolGarden 目前的图片去背景页面是一个浏览器端单图工具：页面组件负责文件选择、模型档位、进度条、预览和下载；真正的去背景逻辑集中在 lib/utils/image-browser.ts 的 removeImageBackground()，页面不会把图片文件传到业务服务器处理。

const modelMap = {
  medium: 'isnet_fp16',
  small: 'isnet_quint8',
} as const;

const modelInput = await normalizeLoadedImageToPng(image);
const blob = await removeBackground(modelInput, {
  publicPath: BACKGROUND_REMOVAL_PUBLIC_PATH,
  model: modelMap[options.model ?? 'medium'],
  output: { format: 'image/png', quality: 1 },
  progress: (label, current, total) => {
    options.onProgress?.(createBackgroundRemovalProgress(label, current, total));
  },
});

因此，这个工具的“本地”含义是：用户图片在浏览器内解码、Canvas 规范化、模型推理和 PNG 导出，图片 Blob 不上传到服务器；但首次使用时浏览器仍需要从模型 CDN 请求开源模型资源。如果断网且模型没有缓存，去背景无法启动。

哪些图片效果更好？