如何使用CSS滤镜或colorMatrix将VIBRANCE效果应用于图像

Question

为了回答这个问题，我将贴出 Vibrance 的定义以及它与普通 Saturation 的区别。

Vibrance 是一种智能工具，巧妙地增加了更暗淡颜色的强度，保留了已经饱和的颜色。它有点像填充光，但是用于颜色。 Vibrance 还可以防止肤色过度饱和和不自然。

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

目前所有 CSS 滤镜均等地应用于图像上的每个像素颜色值。是否有任何方法和/或程序包可以应用所谓的“智能滤镜”，根据正在应用其滤镜的当前像素颜色值来应用其滤镜？

- Alien13

---

我相信可以通过这篇文章中介绍的伽马校正着色来实现。https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/但我仍然不完全理解它。 - Alien13

Answer 1

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

我使用了同样的公式为Fabric.js构建了一个版本的Vibrance，它似乎起到了作用。由于Fabric.js过滤器支持WebGL，您应该发现性能要比Caman.js好得多。

更新：对于任何对此功能感兴趣的人，自Fabric.js v4.6.0（http://fabricjs.com/docs/fabric.Image.filters.Vibrance.html）起，“Vibrance”现在是内置的滤镜。

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>

- melchiar

Answer 2

根据Vibrance的定义，没有任何CSS滤镜具有这种操作。我认为你可以通过其他滤镜模拟那种效果： blur()、brightness()、contrast()、opacity()、saturate()。

img {
  filter: blur(5px) brightness(10%) saturate(10%);
   }

这只是一个例子

- Akbar Taghipour