首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Konvajs中有没有锐度滤镜,如果有怎么用?

Konvajs中有没有锐度滤镜,如果有怎么用?
EN

Stack Overflow用户
提问于 2020-09-29 12:38:25
回答 1查看 121关注 0票数 1

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

在此链接中,清晰度滤镜不可用

EN

回答 1

Stack Overflow用户

发布于 2020-09-30 04:23:27

Konva的核心中没有这样的过滤器。您必须手动实现它。

对于这种用例,您可以编写自己的自定义过滤器。参见custom filters docs

我尝试使用这种锐化的实现:https://gist.github.com/mikecao/65d9fc92dc7197cb8a7c

代码语言:javascript
复制
// 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 && scy < h && scx >= 0 && 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,output

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64112998

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档