javascript - 是否可以将棕褐色值与 KonvaJS 过滤器一起使用？

Question

我想使用给定百分比的 KonvaJS 的 Sepia 过滤器。就像https://www.cssfilters.co/上的 20% 棕褐色

是否可以像这样在 KonvaJS 上设置 Sepia 的值？

Answer 1

目前，您无法在 KonvaJS 中设置 Sepia“值”。但是您可以编写自己的自定义过滤器来调整 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)])

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