Chromakey на HTML-странице с использованием SVG-фильтра feMatrixColor

Question

Я использую кеинга в реальном времени, чтобы преобразовать зеленые пиксели, отображаемые с веб-камеры на веб-странице, в прозрачные пиксели.

Фильтр SVG, который я нашел, кажется довольно мощным, но все еще довольно неяснымдля меня о том, как его использовать.

Фильтр feMatrixColor из SVG: 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" />

Выше приведен пример, в котором альфа установлена ​​наноль для определенного зеленого цвета.Я не использую это как идеальную ссылку, но это работает.Кроме того, я заметил, что последний столбец много делает при рендеринге, и я не понял, какова его роль.Качество конечного результата сильно различается в зависимости от этого значения.

Я хотел бы создать функцию, которая возвращает мне матрицу с выбранным цветом на входе, но я не понимаю логику этогоматрица.

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>