javascript - 如何使用 CSS 滤镜或 colorMatrix 对图像应用 VIBRANCE 效果

Question

为了回答这个问题，我将粘贴 Vibrance 的定义以及它与常规 Saturation 的不同之处。

Vibrance is a smart-tool which cleverly increases the intensity of the more muted colors and leaves the already well-saturated colors alone. It’s sort of like fill light, but for colors. Vibrance also prevents skin tones from becoming overly saturated and unnatural.

Source: https://digital-photography-school.com/vibrance-vs-saturation-in-plain-english/

目前，所有 CSS 滤镜都均匀且平等地应用于图像上的每个像素颜色值。是否有任何方法和/或程序包可以应用所谓的智能过滤器，它根据应用过滤器的当前像素颜色值来应用过滤器？

Answer 1

Adobe 的活力滤镜中使用的确切公式似乎有点神秘，但 Caman.js 库实际上包含一个非常简单的计算活力的公式。

我已经使用相同的公式为 Fabric.js 构建了一个 Vibrance 版本，它似乎可以解决问题。您应该会发现性能也比 Caman.js 好很多，因为 Fabric.js 过滤器支持 WebGL。

更新:对于任何对此功能感兴趣的阅读本文的人，Vibrance 现在是 Fabric.js v4.6.0 的内置过滤器 (http://fabricjs.com/docs/fabric.Image.filters.Vibrance.html)

var canvas = new fabric.Canvas("canvas", {
  backgroundColor: "white"
});

fabric.Image.fromURL("https://live.staticflickr.com/65535/51283215722_e949fa76c8_k.jpg", function(img) {
  img.filters.push(new fabric.Image.filters.Vibrance({
    vibrance: 0
  }));
  img.filters.push(new fabric.Image.filters.Saturation({
    saturation: 0
  }));
  img.applyFilters()
  img.scaleToWidth(350)
  img.set({
    left: 20,
    top: 20
  });
  canvas.add(img)
}, {
  crossOrigin: 'anonymous'
});

function setVibrance(value) {
  var img = canvas.item(0);
  img.filters[0].vibrance = value;
  img.applyFilters();
  canvas.renderAll();
}

function setSaturation(value) {
  var img = canvas.item(0);
  img.filters[1].saturation = value;
  img.applyFilters();
  canvas.renderAll();
}

//start vibrance filter code
(function(global) {

  var fabric = global.fabric || (global.fabric = {}),
    filters = fabric.Image.filters,
    createClass = fabric.util.createClass;

  filters.Vibrance = createClass(filters.BaseFilter, {

    type: 'Vibrance',

    fragmentSource: 'precision highp float;\n' +
      'uniform sampler2D uTexture;\n' +
      'uniform float uVibrance;\n' +
      'varying vec2 vTexCoord;\n' +
      'void main() {\n' +
      'vec4 color = texture2D(uTexture, vTexCoord);\n' +
      'float max = max(color.r, max(color.g, color.b));\n' +
      'float avg = (color.r + color.g + color.b) / 3.0;\n' +
      'float amt = (abs(max - avg) * 2.0) * uVibrance;\n' +
      'color.r += max != color.r ? (max - color.r) * amt : 0.00;\n' +
      'color.g += max != color.g ? (max - color.g) * amt : 0.00;\n' +
      'color.b += max != color.b ? (max - color.b) * amt : 0.00;\n' +
      'gl_FragColor = color;\n' +
      '}',

    vibrance: 0,

    mainParameter: 'vibrance',

    applyTo2d: function(options) {
      if (this.vibrance === 0) {
        return;
      }
      var imageData = options.imageData,
        data = imageData.data,
        len = data.length,
        adjust = -this.vibrance,
        i, max, avg, amt;

      for (i = 0; i < len; i += 4) {
        max = Math.max(data[i], data[i + 1], data[i + 2]);
        avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        amt = ((Math.abs(max - avg) * 2 / 255) * adjust);
        data[i] += max !== data[i] ? (max - data[i]) * amt : 0;
        data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0;
        data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0;
      }
    },

    getUniformLocations: function(gl, program) {
      return {
        uVibrance: gl.getUniformLocation(program, 'uVibrance'),
      };
    },

    sendUniformData: function(gl, uniformLocations) {
      gl.uniform1f(uniformLocations.uVibrance, -this.vibrance);
    },
  });

  fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject;

})(typeof exports !== 'undefined' ? exports : this);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>

<span>Vibrance</span>
<input type="range" value="0" min="-1" max="1" step="0.1" onchange="setVibrance(this.value)"/>
<span>Saturation</span>
<input type="range" value="0" min="-1" max="1" step="0.1" onchange="setSaturation(this.value)"/>

<canvas id="canvas" width="400" height="200"></canvas>