0

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

我发现的 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 设置为零。我不把它作为完美的参考，但它确实有效。此外，我注意到最后一列在渲染中做了很多工作，但我不明白它的作用是什么。最终结果的质量取决于这个值有很大的不同。

我想创建一个函数，它返回一个在输入中选择颜色的矩阵，但我不明白该矩阵背后的逻辑。

4

1 回答 1

0

这是我使用 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>

于 2019-04-25T17:50:14.020 回答