浏览器本地人像抠图可以完全在当前页面内完成推理和图片合成。用户选择照片后，浏览器把图片解码成像素，人物分割模型生成蒙版，Canvas 再利用蒙版保留人物并清除背景，最后导出带透明通道的 PNG。整个过程不需要把照片提交给服务器，也不需要配置 API Key。

这种方案特别适合目标明确的小工具，例如头像、证件照素材、演示文稿人物图和社交媒体封面。它的优势不只是省去后端，更重要的是数据流足够短，用户可以清楚知道照片在哪里被处理。不过，本地运行并不代表模型可以处理所有图片，也不等于第一次打开网页就能离线使用。

一张照片在浏览器里经历了什么

本地抠图的完整流程可以分成五段：

  1. 文件选择器只把用户主动选择的图片交给网页。
  2. 浏览器在内存中完成图片解码，并根据设备能力创建绘图画布。
  3. WebAssembly 运行时加载人物分割模型，对图片执行推理。
  4. 模型输出人物与背景的置信度，前端把它转换为透明度蒙版。
  5. Canvas 将原图、蒙版和可选背景颜色合成，再生成 PNG 文件供用户下载。

这里没有远程推理请求，因此不需要服务器保存图片，也不需要在浏览器代码中放入任何密钥。模型和运行时依然是网页资源，需要先从网站下载。Wisly 将这些文件放在自己的域名下，避免处理过程中临时依赖第三方 CDN。

需要特别区分“本地处理”和“离线可用”。用户第一次访问时仍然需要网络连接来下载页面、JavaScript、WebAssembly 和模型。浏览器之后可能使用缓存，但缓存并不是可靠的离线保证。真正的离线工具还需要 Service Worker、资源版本管理和明确的缓存更新策略。因此，准确的说法是照片在本地处理，而不是笼统宣称网页始终可以离线运行。

模型输出的不是抠好的人像

本站工具使用 MediaPipe Image Segmenter 和 Selfie Segmentation 模型。Google 的说明中，方形版本输入尺寸为 256 × 256，使用 float16，模型文件约 249 KB。它只判断两个类别：索引 0 是背景，索引 1 是人物。

模型并不会直接返回一张透明 PNG，而是返回置信度蒙版。蒙版中的每个位置都有一个接近 0 到 1 的数值。越接近 1，模型越确信这里属于人物；越接近 0，越可能属于背景。头发、肩膀边缘、半透明衣料、运动模糊和前景背景颜色接近的位置，往往会出现中间值。

前端需要把这些连续数值转换成透明度。最简单的方法是设置一个阈值，高于阈值的像素保留，低于阈值的像素清除。但是硬阈值容易让发丝出现锯齿，也可能在肩部留下生硬切口。更实用的处理是给阈值增加一个平滑过渡区：

人物置信度较低：透明
人物置信度居中：逐渐变为不透明
人物置信度较高：完整保留

工具里的“边缘柔化”调节的就是这段过渡，而不是重新运行模型。因此，模型完成一次推理后，拖动滑块可以立即看到变化。柔化过低时边缘更利落，但发丝可能被截断；柔化过高时细节更柔和，也可能把原背景的颜色带到人物边缘。

Canvas 如何生成透明 PNG

得到蒙版后，前端先把原图绘制到源画布，再把低分辨率蒙版平滑缩放到输出尺寸。随后使用 Canvas 的图层合成能力，只保留蒙版覆盖的人物像素。透明背景不需要额外填充；如果用户选择白色或自定义颜色，就先铺满背景，再把人物绘制到上面。

下载格式选择 PNG，是因为 PNG 支持 Alpha 透明通道。JPEG 不支持透明背景，保存时必须填充为某种颜色。WebP 也能保存透明度，但 PNG 在头像、幻灯片、设计软件和办公文档中的兼容性更直观。

压缩文件大小不能直接代表处理时的内存占用。一张十几 MB 的相机照片，解码后可能变成数千万个 RGBA 像素。源画布、人物画布、蒙版画布和输出画布同时存在时，内存会继续增加。为了避免手机浏览器因为超大照片失去响应，工具限制输入文件大小，并将过大的长边缩放到 4096 像素。发生缩放时，界面会明确提示，不会假装输出始终保留相机原始分辨率。

为什么它只能承诺“人像”

模型能力决定页面可以承诺什么。Selfie Segmenter 是为画面中的主要人物设计的，并不是商品、宠物、汽车或任意物体的通用抠图模型。即使某些物品偶尔被保留下来，也不能据此把工具宣传成全能图片去背景服务。

官方模型卡列出了几类重要限制：

  • 手指等细小部位可能从蒙版中丢失。
  • 光线差、噪点多、快速运动和大面积遮挡会降低质量。
  • 人物离镜头太远不属于推荐使用范围。
  • 多个人物大小差异明显时，模型可能无法稳定保留所有人。
  • 模型为实时和移动设备效率做了取舍，不保证像素级完美边缘。

实际使用中，人物占画面比例较大、光线均匀、背景与头发或衣服颜色区别明显的照片，通常更适合自动处理。复杂树叶、逆光发丝、透明头纱和与背景混在一起的衣服边缘，更适合专门的精细抠图模型，或者增加人工选择和修边功能。

边缘滑块只能调整模型已经给出的不确定区域。如果模型把某只手完整判断成背景，改变阈值通常无法凭空恢复正确轮廓。理解这一点，可以避免把“参数可调”误解成“任何错误都能修复”。

首次处理为什么通常更慢

用户看到的等待时间不只有模型推理。首次运行还包括下载运行时、编译 WebAssembly、加载模型、解码图片、缩放、生成蒙版、Canvas 合成和 PNG 编码。之后继续处理图片时，可以复用已经初始化的模型，所以通常会更快。

Google 提供了参考设备上的任务基准，但不同手机、浏览器、图片尺寸、剩余内存和省电模式都会改变实际体验。负责任的工具不应承诺所有设备都在固定秒数内完成，而应该清楚显示“加载模型”和“正在处理”两个状态。

MediaPipe 的 Web 指南还说明，单次 segment() 调用是同步执行的，会短暂占用界面线程。对偶尔处理一张静态人像，这种方式可以配合明确的状态提示使用。如果要连续处理视频或批量照片，就应放到 Web Worker 中，避免多次推理让页面卡顿。

隐私和开源许可也是功能

浏览器本地处理减少了照片传输和服务器留存的风险，但页面仍然需要做好基本约束。运行时与模型最好使用确定版本并由同域托管；内容安全策略应限制脚本和网络连接来源；错误日志不应记录文件名、路径或图片内容；前端代码里更不能出现 API Key、Token 或其他凭据。

依赖许可同样会影响技术选择。一个库可以免费试用，但不一定允许任意闭源网站直接部署。Wisly 使用 Apache License 2.0 的 MediaPipe Tasks Vision 与 Selfie Segmentation 模型，并随部署资源保留相应许可证和来源说明。许可检查应该发生在开发阶段，而不是工具上线后才补做。

直接试用本地人像抠图

你可以打开免费人像抠图工具，选择 JPEG、PNG 或 WebP 人像照片。模型完成本地分割后，可以调整边缘柔化程度，保留透明背景，也可以换成白色或自定义颜色，最后下载 PNG。

如果希望得到更稳定的结果，优先选择主体靠近镜头、轮廓清晰、光线充足的照片。浏览器端机器学习真正适合的不是模糊的“什么都能做”，而是一个范围清楚、模型匹配、数据流透明、失败边界也被认真说明的任务。