Is it possible to use Sepia values with KonvaJS filters?

Question

I would like to use Sepia filter of KonvaJS with given percentage. Like 20% Sepia on https://www.cssfilters.co/

Is it possible to set values of Sepia on KonvaJS like that?

Answer 1

At the current moment, you can't set Sepia "value" in KonvaJS. But you can write your own custom filter that can adjust the power of Sepia:

// "val" should be from 0 to 1
// 1 - means full Sepia
// 0 - no sepia

function createSepiaFilter(val) {
  return function(imageData) {
    var data = imageData.data,
      nPixels = data.length,
      i,
      r,
      g,
      b;

    for (i = 0; i < nPixels; i += 4) {
      r = data[i + 0];
      g = data[i + 1];
      b = data[i + 2];

      data[i + 0] = Math.min(255, r * (0.393 + 0.607 * (1 - val))  + g * 0.769 * val + b * 0.189 * val);
      data[i + 1] = Math.min(255, r * 0.349 * val + g * (0.686 + 0.314 * (1 - val)) + b * 0.168 * val);
      data[i + 2] = Math.min(255, r * 0.272 * val + g * 0.534 * val + b * (0.131 + 0.869 * (1 - val)));
    }
  };
}

// aaply 20% Sepia
img.filters([createSepiaFilter(0.2)])

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