Fabric.js Vibrance Filter

by Steve Eberhardt

HTML

<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="600" height="300"></canvas>

JavaScript

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(500)
  img.set({
    left: 50,
    top: 50
  });
  canvas.add(img)
}, {
  crossOrigin: 'anonymous'
});

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

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

//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 =...