javascript - KonvaJS 过滤器值的等价物

Question

我正在尝试在 https://www.cssfilters.co/ 上找到 KonvaJS 过滤器值与 CSS 过滤器的等价物

例如，我如何使用 KonvaJS 应用“1977”过滤器。我尝试了很多选择，但每次都得到不同的结果。也可以为棕褐色或灰度提供值吗？

我正在使用这样的过滤器(具有不同的值):

backgroundImage.filters([
    Konva.Filters.Contrast,
    Konva.Filters.Brighten,
    Konva.Filters.HSV
    ]);

backgroundImage.contrast(10);
backgroundImage.brightness(0.10);
backgroundImage.saturation(7.8);           
backgroundImage.hue(0);
backgroundImage.value(0);

Answer 1

我刚刚制作了这个属性组合并且效果非常接近:

  image.filters([
    Konva.Filters.Contrast,
    Konva.Filters.Brighten,
    Konva.Filters.HSV
    ]);

  image.contrast(10);
  image.brightness(0.1);
  image.saturation(1.1);           
  image.hue(0);
  image.value(0);


  const overlay = new Konva.Rect({
    width: image.width() * image.scaleX(),
    height: image.height() * image.scaleY(),
    fill: 'rgba(243, 106, 188, 0.3)',
    globalCompositeOperation: 'screen'
  });
  layer.add(overlay);
  layer.draw();

演示:https://jsbin.com/cuyikeduza/2/edit?html,js,output

如果您很难调整 Konva 过滤器并且编写自己的过滤器是有意义的。