HTML5本身不支持自动抠图，所谓“HTML5抠图”实为JavaScript调用WebAssembly模型（如rembg-wasm）或后端API实现；主流方案是前端上传图片、后端用rembg/Segment Anything推理并返回结果。
HTML5 本身不提供自动抠图能力
HTML5 标准里没有 removeBackground()、autoCutout() 这类 API，浏览器原生也不支持直接上传一张 PNG/JPG 就一键返回透明背景图。所谓“HTML5 抠图”，实际是靠 JavaScript 调用第三方模型（如 ONNX Runtime + RemBG 模型）、WebAssembly 加速的推理库，或调用后端 API 实现的——前端只是把图片传过去、等结果回来再渲染。
主流可行路径：客户端调用 WebAssembly 模型（如 rembg-wasm）
目前最接近“纯前端自动抠图”的方案，是使用编译为 WebAssembly 的 Python rembg 模型（例如 rembg-wasm）。它能在浏览器中运行轻量级 U-2-Net 模型，不发请求、不传图到服务器，但对图片尺寸和设备性能有要求。
- 需引入
@tenebris/rembg-wasm或类似封装包（注意不是官方 rembg，而是社区 wasm 移植版） - 输入图片建议 ≤ 1024×1024，否则内存溢出或卡死（
WebAssembly.Memory.grow() failed是常见报错） - 首次加载模型约 10–15MB，需预加载并缓存
session，否则每次调用都重新初始化，延迟高 - 输出是
Uint8ClampedArray，需手动拼成 RGBAImageData，再画到上；直接赋值canvas.toDataURL('image/png')才能得到带 alpha 通道的图
更稳妥的做法：前端上传 + 后端调用 rembg / segment-anything
99% 实际项目用的是这条链路：用户选图 → 前端用 FileReader 读取为 ArrayBuffer → fetch 提交到你自己的后端接口 → 后端用 Python（rembg 或 segment-anything）跑模型 → 返回 base64 或 blob URL → 前端创建 img 或设置 canvas.drawImage()。
- 避免浏览器兼容性问题（Safari 对 WebAssembly 支持弱，iOS 尤其容易崩溃）
- 可控制模型版本、输入参数（如
alpha_matting、alpha_matting_foreground_threshold） - 必须做服务端校验：限制文件大小（如 ≤ 5MB）、检查 MIME 类型（仅允许
image/jpeg、image/png），否则可能被构造恶意输入触发 OOM - 别把 API 地址硬编码在前端，防止被爬走额度；用后端代理转发，或签名校验请求
别踩的坑：Canvas 导出透明背景图失败
即使抠图逻辑正确，导出仍是白底？大概率是 canvas 创建时没关默认填充色，或 drawImage 时源图跨域被污染。
立即学习“前端免费学习笔记（深入）”；
- 创建 canvas 必须显式设宽高：
canvas.width = w; canvas.height = h;，不能只靠 CSS 缩放 - 绘图前清空 canvas：
ctx.clearRect(0, 0, canvas.width, canvas.height)（否则残留上一次内容） - 如果用
ctx.drawImage(img, ...)，确保img.crossOrigin = 'anonymous'，且服务端返回 CORS 头（否则canvas.toDataURL()抛SecurityError） - 导出必须用
toDataURL('image/png')，'image/jpeg'会丢 alpha 通道，强制变白底
