Доступен ли фильтр резкости в Konvajs, если он есть, как его использовать?

#konvajs #konvajs-reactjs

#конвайс #konvajs-reactjs

Вопрос:

https://konvajs.org/api/Konva.Filters.html

по этой ссылке фильтр резкости недоступен

Ответ №1:

Konva в его ядре нет такого фильтра. Вы должны реализовать его вручную.

Для этого варианта использования вы можете написать свой собственный пользовательский фильтр. Смотрите Документы по пользовательским фильтрам.

Я попытался использовать эту реализацию резкости: https://gist.github.com/mikecao/65d9fc92dc7197cb8a7c

 // noprotect

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);


function Sharpen(srcData) {
  const mix = 1;
  const w = srcData.width;
  const h = srcData.height;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
    var x, sx, sy, r, g, b, a, dstOff, srcOff, wt, cx, cy, scy, scx,
        weights = [0, -1, 0, -1, 5, -1, 0, -1, 0],
        katet = Math.round(Math.sqrt(weights.length)),
        half = (katet * 0.5) | 0,
        dstData = ctx.createImageData(w, h),
        dstBuff = dstData.data,
        srcBuff = srcData.data,
        y = h;
  


    while (y--) {
        x = w;
        while (x--) {
            sy = y;
            sx = x;
            dstOff = (y * w   x) * 4;
            r = 0;
            g = 0;
            b = 0;
            a = 0;

            for (cy = 0; cy < katet; cy  ) {
                for (cx = 0; cx < katet; cx  ) {
                    scy = sy   cy - half;
                    scx = sx   cx - half;

                    if (scy >= 0 amp;amp; scy < h amp;amp; scx >= 0 amp;amp; scx < w) {
                        srcOff = (scy * w   scx) * 4;
                        wt = weights[cy * katet   cx];

                        r  = srcBuff[srcOff] * wt;
                        g  = srcBuff[srcOff   1] * wt;
                        b  = srcBuff[srcOff   2] * wt;
                        a  = srcBuff[srcOff   3] * wt;
                    }
                }
            }

            dstBuff[dstOff] = r * mix   srcBuff[dstOff] * (1 - mix);
            dstBuff[dstOff   1] = g * mix   srcBuff[dstOff   1] * (1 - mix);
            dstBuff[dstOff   2] = b * mix   srcBuff[dstOff   2] * (1 - mix);
            dstBuff[dstOff   3] = srcBuff[dstOff   3];
        }
    }
  for(var i = 0; i < dstData.data.length; i  ) {
    srcData.data[i] = dstData.data[i];
  }
}

Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
  img.setAttrs({filters: [Sharpen]});
  img.cache();
  layer.add(img);
  layer.draw();
});
  

Демонстрация: https://jsbin.com/tejalusano/1/edit?html ,js, вывод