Canvas提取RGB单通道需用getImageData获取Uint8ClampedArray像素数组，按i、i+1、i+2索引分别对应R、G、B值，置零无关通道后putImageData写回；CSS滤镜无法真正清空通道，仅Canvas可精确控制。
Canvas getImageData 怎么提取 RGB 单通道数据
HTML5 本身没有内置“红绿蓝通道分离”滤镜，得靠 canvas + getImageData 手动操作像素。核心是拿到像素数组后，把不需要的通道值置为 0。
注意：getImageData 返回的 data 是一维 Uint8ClampedArray，每 4 个元素一组对应一个像素的 R、G、B、A 值（顺序固定）。索引规律是：data[i] = R，data[i+1] = G，data[i+2] = B，data[i+3] = A，其中 i 每次递增 4。
- 只保留红色通道：循环中设
data[i+1] = data[i+2] = 0 - 只保留绿色通道：设
data[i] = data[i+2] = 0 - 只保留蓝色通道：设
data[i] = data[i+1] = 0 - 别忘了最后用
putImageData写回画布
filter: url(#sepia) 能不能改成单色通道
不能。CSS filter 的 url() 引用的是 SVG 滤镜定义，它支持
常见误区是以为
立即学习“前端免费学习笔记（深入）”；
用 CSS mix-blend-mode 模拟通道叠加效果？
可以粗略模拟，但不是通道分离，而是混合。比如叠一个纯红层 + mix-blend-mode: screen，会让原图中红色成分更突出，但无法剔除绿色/蓝色信息。
-
screen或multiply适合强调某色，不等于通道提取 - 对透明度敏感，叠加层若有 alpha，结果不可控
- 无法反向还原原始单通道灰度值（Canvas 方案可精确控制每个像素的 R/G/B 数值）
- 性能上比 Canvas 方案好，但功能边界清晰：这是视觉增强，不是数据提取
性能差？为什么 getImageData 在大图上卡顿
因为 getImageData 会复制整块像素内存，1920×1080 图像就是约 8MB 数据（4 字节 × 2M 像素），频繁读写触发大量内存分配和 GC。移动端尤其明显。
- 加节流：用
requestAnimationFrame分批处理，每次只扫 100 行 - 降采样：先用
drawImage缩小到 50% 再处理，视觉损失小，性能提升明显 - 避免在
mousemove里反复调用；改为“点击触发一次处理”更稳妥 - Web Worker 里做计算？不行——
getImageData和putImageData只能在主线程访问 canvas 上下文
通道分离这事，看着简单，实际卡点都在内存和时机。别指望一行 CSS 解决，也别无脑全量扫图。该裁就裁，该缓就缓，像素级操作没捷径。
