html5 canvas可实现轻量级绿幕抠像，核心是逐帧读取视频流、rgb阈值判定绿色像素并设透明，再与背景手动线性混合；需注意分辨率缩放、采样优化及未预乘alpha处理。
HTML5 Canvas 的像素操作可以实现基础的绿幕抠像（Chroma Key），但需注意：它适合轻量级、低延迟要求不严的前端场景（如网页摄像头实时预览），无法替代专业视频处理软件的精度和性能。核心思路是逐帧读取视频流画面，遍历每个像素，根据 RGB 值判断是否为绿色背景，将符合条件的像素设为透明，再与目标背景图层合成。
1. 获取并渲染视频流到 Canvas
需先通过 getUserMedia 获取用户摄像头视频流，并绘制到隐藏的 <canvas></canvas> 上用于像素处理：
- 创建两个 canvas：一个
videoCanvas（隐藏）用于读取帧，一个outputCanvas（显示）用于最终合成结果 - 用
video元素播放媒体流，设置play()后，在requestAnimationFrame循环中调用drawImage(video, 0, 0)将当前帧画入videoCanvas - 确保 video 和 canvas 尺寸一致（如 640×480），避免缩放导致颜色失真
2. 提取像素并做色度键控（Green Screen Detection）
使用 getContext('2d').getImageData() 获取像素数组，对每个像素进行绿色通道增强+阈值判断：
- 遍历
data数组（每 4 个值为 R,G,B,A） - 计算绿色强度：常用方法是
g - Math.max(r, b) * 1.2或 HSV 转换后取 H∈[35°, 90°] + S>30% + V>30% - 设定阈值（如 >40），满足则将 alpha 设为 0（完全透明）；否则保留原 alpha 或轻微柔化边缘（如用距离函数渐变 alpha）
- 避免硬边：可对判定结果做简单膨胀/模糊（如邻域均值）或高斯权重衰减
3. 合成前景与背景图层
抠像后的像素数据需叠加到背景上，不能直接写回同一 canvas（会丢失原始背景）：
- 准备一张背景图（
<img>或另一 canvas），用drawImage(bg, 0, 0)先画到底层 - 将处理后的像素数据（
putImageData）写入outputCanvas的对应位置 - 注意：
putImageData不受 globalAlpha 或 compositeOperation 影响，必须手动混合——即对每个非透明像素，按 alpha 值做线性插值：outR = fgR × fgA + bgR × (1−fgA)
（其他通道同理，需归一化 alpha 到 0–1）
4. 性能与实用优化建议
纯 JS 像素遍历在高分辨率下易卡顿，需针对性优化：
- 降低处理分辨率：将 videoCanvas 设为 320×240，输出时用 CSS 缩放 canvas 显示，视觉影响小但性能提升明显
- 跳点采样：每 2×2 或 3×3 像素只处理一个中心点，配合后续插值平滑
- 用
Uint8ClampedArray直接操作像素，避免 Math.round 等开销；用for替代forEach - 考虑 WebAssembly（如 Rust 编译）或 OffscreenCanvas + Worker 分离计算，避免阻塞主线程
- 实际绿幕效果依赖拍摄质量：均匀打光、避免绿边反光、人物远离背景，否则算法难补救
不复杂但容易忽略：浏览器默认 canvas 是 premultiplied alpha，而 getImageData 返回的是未预乘格式，手动混合时务必按未预乘方式计算，否则会出现灰边或颜色偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
