Question

我正在实现实时抠像，以便将网页中网络摄像头显示的绿色像素转换为透明像素。

我发现SVG过滤器似乎功能强大，但是对于如何使用它，我仍然不清楚。

SVG的feMatrixColor滤镜： https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix

我发现此示例https://codepen.io/iamschulz/pen/MmxdMQ与我要尝试的操作很接近。

在加载应用程序时，我必须校准颜色，为此，我需要生成匹配的颜色矩阵。

 <feColorMatrix type="matrix" 
   values="1   0   0   0   0 
           0   1   0   0   0  
           0   0   1   0   0 
           1.5 -2  1.5 0   1" />

上面是一个示例，其中将已定义的绿色的alpha设置为零。我没有将其用作完美的参考，但是它可以工作。此外，我注意到最后一列在渲染中起了很大作用，但我没有得到它的作用。最终结果的质量取决于此值。

我想创建一个函数，该函数将在输入中返回带有选择颜色的矩阵，但我不理解该矩阵背后的逻辑。

Answer 1

这是一个我使用svg滤镜去除绿色的示例。我使用了此工具（可以在其中拖放图像）来获取正确的过滤器：https://codepen.io/enxaneta/full/ENRZGO

<svg viewBox="0 0 90 50">
  <defs>
<filter id="f">
   <feColorMatrix in="SourceGraphic" 
                  type="matrix" 
                  values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 0 1 -1 1 "></feColorMatrix>
</filter>
  </defs>
  <g filter="url(#f)">
  <rect fill="red" width="30" height="50" />
  <rect fill="green" x="30" width="30" height="50" />
  <rect fill="blue" x="60" width="30" height="50" />
  </g>
</svg>

使用SVG过滤器feMatrixColor的HTML页面中的色度键

1 个答案: