Equivalents of KonvaJS filter values

Question

I'm trying to find KonvaJS filter values' equivalents of CSS filters on https://www.cssfilters.co/

For example how can I apply "1977" filter with KonvaJS. I tried many options but I'm getting different results everytime. Also is it possible to give values for Sepia or Grayscale?

I'm using filters like this (with different values):

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);

@lavrton added some code to question and also is it possible to give values for sepia and grayscale like in this css filter generator? — she hates me, Jul 24 '19 at 02:20

score 0 · Answer 1 · answered Jul 30 '19 at 06:33

I just made this combination of properties and it works very close:

  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();

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

If it is hard for you to adjust Konva filters and make sense to write your own filter.

thank you very much, is there any way to use values for Sepia too? for example for "Brannan" filter on cssfilters.co — she hates me, Aug 10 '19 at 22:30

Equivalents of KonvaJS filter values

1 Answers1