Как я могу применить фильтр резкости?

Question

Я разрабатываю инструмент для применения фильтров в Angular. Я использую Canvas HTML-компонент для применения различных фильтров. У меня нет проблем с контрастом или яркостью, потому что свойство FILTER имеет такие фильтры.

Однако я не могу напрямую использовать фильтр резкости. Я знаю, что мне нужно использовать Convolution с некоторым ядром, но я не знаю, как я могу это сделать.

Answer 1

В современных браузерах вы можете использовать SVG-фильтры на рисунках холста, из которых feConvolveMatrix сделает это довольно простым:

const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
const matrix = document.getElementById( 'conv-matrix' );
let speed = 0.05;
let pow = 0;
const img = new Image();
img.onload = (e) => {
  canvas.width = img.width;
  canvas.height = img.height;
  animate();
};
img.src = "https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg";

function animate() {
  // animate 'pow' back and forth
  pow = pow + speed;
  if( pow >= 5 || pow <= -2 ) { speed *= -1; }
  // we'll use the SVG filter on our context
  ctx.filter = 'url(#sharp)';
  // set the matrix as you wish, here I just gather all closest to the center
  matrix.setAttribute( 'kernelMatrix',
    pow * 1 + ' ' + pow *  1 + ' ' + pow * -1 + ' ' +
    pow * 1 + ' ' + 1 + ' ' + pow * -1 + ' ' +
    pow * 1 + ' ' + pow * -1 + ' ' + pow * -1
  );

  ctx.drawImage( img, 0, 0 );
  ctx.filter = 'none';
  
  requestAnimationFrame( animate );
}

<svg width="0" height="0" style="position:absolute;z-index: -1">
  <filter id="sharp">
    <feConvolveMatrix id="conv-matrix"
      kernelMatrix="
         1  1 -1
         1  1 -1 
         1 -1 -1
     "/>
  </filter>
</svg>
<canvas id="canvas"></canvas>

---