智能抠图技术原理科普：AI是如何在浏览器里"看懂"图片的？
2026年6月23日 · 杂七杂八工具箱 · 作者：半吊子程序员
你们这个怎么做到不上传的？
很多人问我，抠图不是要上传到云端服务器吗？你们这个怎么做到不上传的？说实话，我第一次听到这个问题的时候，也愣了一下。因为在我这个业余程序员看来，"在浏览器里跑AI"已经是挺成熟的技术了，但对普通用户来说，这确实有点反直觉。
大家习惯了那种"上传照片→服务器处理→下载结果"的模式，觉得AI就得在云端跑。但其实，浏览器端的AI已经发展了好几年了，技术上完全可行。今天我就以一个业余爱好者的角度，跟大家聊聊智能抠图背后的技术原理。
抠图到底在解决什么问题？
先说说抠图的本质。在计算机视觉领域，抠图叫做"图像分割"（Image Segmentation），具体到"把主体从背景中分出来"这个任务，叫"前景-背景分割"。简单来说，就是让计算机判断一张图片里的每个像素点：这个像素是属于前景（比如人、物体），还是属于背景？
听起来很简单对吧？但你想，一张1920x1080的图片有200多万个像素点，每个点都要判断，而且还要处理边缘的过渡、半透明的物体（比如头发丝、玻璃杯），这可不是人眼扫一眼就能搞定的事。
传统方法：绿幕和手动抠图
在AI普及之前，抠图主要有这几种方式：
绿幕抠图：拍电影常用，演员站在绿色背景前，后期用软件把绿色部分替换成其他背景。优点是效果好，缺点是得专门搭绿幕，普通用户用不上。
Photoshop魔棒工具：通过颜色相似度来选择区域。简单粗暴，但遇到复杂背景就抓瞎，经常选多或者选少。
Photoshop钢笔工具：手动勾路径，一个点一个点地描。效果最好，但超级耗时，抠一张图可能要半小时。我以前做电商产品图的时候，经常抠到眼花。
这些方法要么需要专业设备，要么需要专业技能，要么需要大量时间。普通人想快速抠个图？基本没戏。
AI来了：语义分割神经网络
深度学习兴起之后，研究人员开始用神经网络来做图像分割。比较经典的架构有U-Net和DeepLab。
U-Net最早是为医学图像分割设计的，结构像一个"U"字形：左边是编码器，把图片压缩成特征；右边是解码器，把特征还原成分割结果。中间还有"跳跃连接"，把低层的细节信息传给高层，这样分割出来的边缘会更精细。
DeepLab是谷歌出的，用了"空洞卷积"（Atrous Convolution）和"条件随机场"（CRF）来提高分割精度，特别擅长处理多尺度的物体。
这些模型怎么"看懂"图片的呢？简单来说，它们通过大量的训练数据（通常是几十万张已经标注好的图片），学会了识别"什么是前景，什么是背景"的规律。比如，它知道人脸的肤色、轮廓、头发的纹理，知道物体的边缘通常在颜色突变的地方。训练完成后，模型就能对从未见过的新图片进行分割了。
浏览器里怎么跑AI？
好了，重头戏来了。AI模型通常是在Python环境下用GPU训练的，那怎么跑到浏览器里呢？这里有几个关键技术：
ONNX Runtime Web：ONNX（Open Neural Network Exchange）是微软主导的AI模型通用格式，ONNX Runtime是它的运行引擎。ONNX Runtime Web是专门给浏览器用的版本，可以直接在浏览器里加载和运行ONNX格式的模型。
WebGPU：这是新一代的浏览器图形API，能让JavaScript直接调用GPU进行计算。你知道你电脑里的显卡除了打游戏还能干什么吗？它特别擅长并行计算，一张图片几百万个像素点，每个点都要过一遍模型，这种重复性工作交给GPU再合适不过。WebGPU就是让浏览器能直接调用显卡干活的技术。
WebAssembly：如果浏览器不支持WebGPU（比如一些老版本浏览器），还可以用WebAssembly作为后备方案。WebAssembly是一种可以在浏览器里运行的低级代码格式，性能接近原生程序，虽然比不上GPU加速，但也比纯JavaScript快很多。
简单来说：AI模型被下载到你的浏览器里，然后用你自己的GPU或者CPU来计算。整个过程不需要和任何服务器通信，你的照片从头到尾都只在你的电脑上。
@ligrila/background-remover 组件
杂七杂八工具箱的智能抠图工具，用的是一个叫 @ligrila/background-remover 的开源组件。这个组件把上面说的那些技术整合到了一起，提供了简单易用的接口。
它的工作流程大概是这样的：
1. 用户上传图片（通过文件选择或者拖拽）
2. 图片被转换成模型需要的格式（通常是RGB像素数据）
3. 图片被送入模型进行推理，得到一个"遮罩"（mask），每个像素点都有一个0-1之间的值，表示它属于前景的概率
4. 根据遮罩，把前景像素保留，背景像素设为透明
5. 输出最终的透明背景图片
整个过程通常只需要几秒钟，取决于你的设备性能和图片大小。
第一次用为什么有点慢？
你第一次使用智能抠图时，可能会等个十几秒甚至更久。这不是在上传照片，而是在下载AI模型。
抠图模型文件通常有几十MB，需要从CDN下载到你的浏览器里。下载完成后，模型会被缓存到IndexedDB（浏览器的本地数据库）中。这个过程只需要第一次使用时完成，之后再用就是直接从本地加载，速度会快很多。
所以如果你第一次用觉得"怎么这么慢"，别急，那是模型在下载。之后就丝滑了。
怎么抠图效果更好？
虽然AI抠图已经很智能了，但还是有一些小技巧能让效果更好：
背景尽量干净：纯色或者简单纹理的背景最容易处理。如果你的背景很复杂（比如树林、人群），AI可能会"犯迷糊"。
光线要充足：光线太暗会让主体和背景的边界模糊，AI就不好判断哪里是边缘。
主体和背景要有对比：如果主体和背景颜色太接近（比如白衣服在白墙前），抠图效果会打折扣。
图片分辨率别太高：虽然听起来反直觉，但太大的图片（比如4K、8K）处理起来会很慢，而且不一定效果更好。一般1000-2000像素宽的图片就够了。
电脑端效果更好：电脑的GPU通常比手机强，处理速度更快，效果也更稳定。建议在电脑上使用。
试试看
如果你对智能抠图感兴趣，可以去 这里 试试。不需要注册，不需要登录，上传照片就行。你可以做个实验：打开浏览器的开发者工具（F12），切到"网络"标签页，然后上传一张照片进行抠图。你会看到除了加载页面本身之外，没有任何新的网络请求。你的照片根本就没有离开过浏览器。
浏览器端AI的未来
说实话，浏览器端AI现在还有很多限制。模型大小受限（太大了下载慢）、推理速度受限（比不上服务器端的顶级GPU）、浏览器兼容性也是个问题。
但技术是在进步的。WebGPU标准在逐步完善，浏览器厂商在不断优化性能，研究人员也在开发更高效的轻量级模型。我相信用不了多久，浏览器端AI的能力会越来越强，能做的事情也会越来越多。
作为一个业余程序员，我觉得最酷的是：以前只有大公司、大服务器才能做的AI任务，现在普通人用浏览器就能做了。这不仅仅是技术的进步，更是一种"去中心化"——AI不再被少数巨头垄断，而是真正走进了每个人的电脑里。
好了，技术科普就到这里。如果你有什么问题，欢迎在工具页面留言。我是半吊子程序员，一个业余搞搞前端的程序员，咱们下篇文章见！