FabricJS - 棕褐色效果

Question

使用fabricJS我正在尝试为我的图片添加棕褐色效果，但我对sepia或sepia2内置效果感到不满意。

下面是一张截图，左侧图片是Sepia2效果，右侧是我希望实现的效果：

查看fabric.js文件，我可以看到效果的细分（见下文）。我花了最后一小时更改值，希望他们可以改变它以匹配上面但不知道什么数字意味着我不能得到一个很好的匹配。有谁知道我正在追求的棕褐色的正确值？

applyTo: function(canvasEl) {
  var context = canvasEl.getContext('2d'),
      imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
      data = imageData.data,
      iLen = data.length, i, r, g, b;

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

    data[i] = (r * 0.393 + g * 0.969 + b * 0.189 ) / 1.351;
    data[i + 1] = (r * 0.349 + g * 0.986 + b * 0.168 ) / 1.203;
    data[i + 2] = (r * 0.272 + g * 0.934 + b * 0.131 ) / 2.140;
  }

  context.putImageData(imageData, 0, 0);
}

Answer 1

其他棕褐色效果使用类似的公式，但没有这种尾随除法。 所以，采取sepia2过滤器;

尝试更改这些行：

data[i] = (r * 0.393 + g * 0.969 + b * 0.189 ) / 1.351;
data[i + 1] = (r * 0.349 + g * 0.986 + b * 0.168 ) / 1.203;
data[i + 2] = (r * 0.272 + g * 0.934 + b * 0.131 ) / 2.140;

简单地说：

data[i] = (r * 0.393 + g * 0.969 + b * 0.189 );
data[i + 1] = (r * 0.349 + g * 0.986 + b * 0.168 );
data[i + 2] = (r * 0.272 + g * 0.934 + b * 0.131 );

这是我能够最接近一个可识别的＆＃39;棕褐色效应。