使用SVG filter feMatrixColor实现HTML页面中的Chromakey

Question

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

我发现的SVG过滤器看起来非常强大，但我仍然不清楚如何使用它。

来自SVG：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix的feMatrixColor过滤器

我发现这个示例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>

​