HTML5绿幕抠像核心是稳定抠图与实时合成，需video设宽高属性、autoplay/muted、playsinline及loadeddata监听；用HSV色域判断绿色更准；手动Alpha混合实现羽化；降采样、跳帧等优化保障性能。
HTML5 中用 <video> 结合 <canvas> 实现绿幕抠像，核心不是“炫酷”本身，而是稳定抠出干净边缘、实时合成不卡顿。真正让效果看起来炫酷的，是后续叠加的动态背景、光影过渡或轻微羽化——这些都建立在基础抠像准确的前提下。
确保视频流能被 Canvas 正确捕获
这是整个流程的前提，很多“抠不出来”其实卡在这一步：
-
video 必须显式设置宽高属性（如
width="640" height="480"），不能只靠 CSS 缩放，否则 getImageData 读取的像素会错位、颜色失真 -
必须加
autoplay和muted：绕过浏览器自动播放策略，尤其移动端和 Chrome 90+ 之后限制严格 -
iOS 设备务必加
playsinline：防止强制全屏，导致 canvas 捕获不到画面 -
监听
loadeddata再启动绘制：避免前几帧是黑屏或空白，造成初始合成异常
用 HSV 色域判断绿色，比 RGB 更稳更准
直接比对 RGB 值（比如 r 120 && b ）在光照不均、压缩失真时极易漏抠或误抠。HSV 空间把颜色（Hue）、饱和度（Saturation）、明度（Value）分开，对绿幕识别鲁棒性强得多：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 绿色在 HSV 中集中在 H ∈ [45°, 75°]（注意单位是角度，Canvas 的
rgbToHsv工具函数可转换） - 同时要求 S > 30%（排除灰白区域）、V > 50%（排除暗部阴影），三者都满足才判定为绿幕像素
- 实际代码中可先用
rgb2hsv(r, g, b)转换，再统一阈值判断，比纯 RGB 逻辑少调参、容错高
手动 Alpha 混合，避免硬边和发虚
Canvas 的 putImageData 不支持图层混合模式，必须自己算——这也是让效果“炫酷”的关键细节：
立即学习“前端免费学习笔记（深入）”；
- 不要简单把绿幕像素 alpha 设为 0；可对边缘像素做距离衰减：计算当前像素与最近非绿像素的色差或 HSV 距离，按距离线性降低 alpha（例如 0.3～0.7），实现自然羽化
- 合成时必须手动插值：
outR = fgR × fgA + bgR × (1 − fgA)，且所有通道（R/G/B/A）都要归一化到 0–1 再参与运算 - 背景图建议用
drawImage(bg, 0, 0)先画到底层 canvas，再把处理后的前景数据putImageData写上去，顺序不能反
性能优化让实时不掉帧
640×480 分辨率下每帧要处理 30 万像素，纯 CPU 遍历容易卡顿。几个实用技巧：
- 降采样处理：把 videoCanvas 设为 320×240，处理完再放大显示，视觉损失小，性能提升明显
- 跳帧处理：不是每一帧都抠，比如每 2 或 3 帧处理一次，人眼几乎察觉不到延迟，CPU 压力减半
-
缓存关键变量：循环前就缓存
data.length、width、height，避免反复读取；用| 0替代Math.floor加速整数运算 - 真要追求高帧率+高清（如 1080p），建议升级到 WebGL，用 fragment shader 并行处理，但入门门槛更高
