Эквиваленты значений фильтра KonvaJS

Я пытаюсь найти эквиваленты значений фильтра KonvaJS CSS-фильтров на https://www.cssfilters.co/

Например, как я могу применить фильтр "1977" с KonvaJS. Я перепробовал много вариантов, но каждый раз получаю разные результаты. Также возможно ли дать значения для сепии или оттенков серого?

Я использую фильтры вот так (с разными значениями):

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

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 и имеет смысл написать свой собственный фильтр.

Другие вопросы по тегам