Web前端：如何将图像单色彩通道单独显示为灰度图？

不需要改用Canvas，直接通过CSS的filter: matrix()就能精准实现单通道提取，同时将通道的最大值（255）映射为纯白。核心思路是将目标通道的数值复制到RGB三个通道，这样通道值越高，颜色越接近白色，完全符合你的需求。

实现步骤 #

1. HTML结构 #

保留原有的img标签，添加切换按钮：

<img id="camera-img" src="你的摄像头流地址" alt="摄像头画面">
<div class="channel-controls">
  <button data-channel="color">彩色模式</button>
  <button data-channel="red">红色通道</button>
  <button data-channel="green">绿色通道</button>
  <button data-channel="blue">蓝色通道</button>
</div>

2. CSS滤镜定义 #

通过矩阵滤镜分别定义三个通道的显示规则：

/* 红色通道：将原R值复制到RGB三个通道 */
.img-red {
  filter: matrix(1, 0, 0, 0, 0,
                  1, 0, 0, 0, 0,
                  1, 0, 0, 0, 0,
                  0, 0, 0, 1, 0);
}

/* 绿色通道：将原G值复制到RGB三个通道 */
.img-green {
  filter: matrix(0, 1, 0, 0, 0,
                  0, 1, 0, 0, 0,
                  0, 1, 0, 0, 0,
                  0, 0, 0, 1, 0);
}

/* 蓝色通道：将原B值复制到RGB三个通道 */
.img-blue {
  filter: matrix(0, 0, 1, 0, 0,
                  0, 0, 1, 0, 0,
                  0, 0, 1, 0, 0,
                  0, 0, 0, 1, 0);
}

矩阵参数说明：CSS的matrix()滤镜是20个值的RGBA变换矩阵，前16个对应RGB通道的输入权重，我们只需要把目标通道的权重复制到R、G、B三个输出通道即可。

3. JS交互逻辑 #

给按钮绑定切换事件，动态添加/移除对应CSS类：

const cameraImg = document.getElementById('camera-img');
const controlBtns = document.querySelectorAll('.channel-controls button');

controlBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 先清空所有通道类
    cameraImg.classList.remove('img-red', 'img-green', 'img-blue');
    // 切换到对应模式
    const channel = btn.dataset.channel;
    if (channel !== 'color') {
      cameraImg.classList.add(`img-${channel}`);
    }
  });
});

效果验证 #

• 彩色模式：img标签正常显示原彩色画面
• 红色通道：画面中红色分量越高越接近白色，绿色、蓝色分量被完全屏蔽
• 绿色通道：原绿色像素（如#00FF00）会显示为纯白，其他颜色按绿色分量灰度显示
• 蓝色通道：同理，蓝色分量决定画面亮度，最大值为纯白

内容的提问来源于stack exchange，提问作者Alberto Chiesa