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过滤器，那么编写自己的过滤器是有意义的。