Javascript 如何使用fabric.js设置对比度和饱和度

我想在我的图像编辑器中设置对比度、饱和度和色调。为此，我使用fabric.js，但它只有亮度选项

下面是MyFabric js代码

(function() {

fabric.Object.prototype.transparentCorners = false;
  var $ = function(id){return document.getElementById(id)};
  console.log($);

  function applyFilter(index, filter) {
    console.log(filter);
      var obj = canvas.getActiveObject();
      obj.filters[index] = filter;
      obj.applyFilters(canvas.renderAll.bind(canvas));
  }

  function applyFilterValue(index, prop, value) {
   var obj = canvas.getActiveObject();
   if (obj.filters[index]) {
   obj.filters[index][prop] = value;
   obj.applyFilters(canvas.renderAll.bind(canvas));
  }
 }

  fabric.Object.prototype.padding = 5;
  fabric.Object.prototype.transparentCorners = false;

  var canvas = this.__canvas = new fabric.Canvas('c'),
  f = fabric.Image.filters;

  fabric.Image.fromURL('../lib/bg.png', function(img) {
    canvas.backgroundImage = img;
   canvas.backgroundImage.width = 400;
  canvas.backgroundImage.height = 400;
  });


  canvas.on({
   'object:selected': function() {
    fabric.util.toArray(document.getElementsByTagName('input'))
                       .forEach(function(el){ el.disabled = false; })

    var filters = ['brightness',];
 //         var filters = ['grayscale', 'invert', 'remove-white',  'sepia', 'sepia2',
 //                      'brightness', 'noise', 'gradient-transparency', 'pixelate',
 //                      'blur', 'sharpen', 'emboss', 'tint', 'multiply',   'blend'];

      for (var i = 0; i < filters.length; i++) {
         $(filters[i]).checked = !!canvas.getActiveObject().filters[i];
      }

      applyFilter(5, true   && new f.Brightness({
      brightness: parseInt($('brightness-value').value, 10)
    }));



    },
    'selection:cleared': function() {
      fabric.util.toArray(document.getElementsByTagName('input'))
                      .forEach(function(el){ el.disabled = true; })
    }
   });

   fabric.Image.fromURL('../upload/Chrysanthemum.jpg', function(img) {
    var oImg = img.set({ left: 50, top: 100, angle: 0 }).scale(0.9);
   canvas.add(oImg).renderAll();
   canvas.setActiveObject(oImg);
  });
 $('brightness').onclick = function () {
   applyFilter(5, this.checked && new f.Brightness({
    brightness: parseInt($('brightness-value').value, 10)
   }));
   };
    $('brightness-value').onchange = function() {
    applyFilterValue(5, 'brightness', parseInt(this.value, 10));
  };

 })();

（函数（）{
fabric.Object.prototype.transparentCorners=false；
var$=函数（id）{return document.getElementById（id）}；
console.log（$）；
函数applyFilter（索引、过滤器）{
控制台日志（过滤器）；
var obj=canvas.getActiveObject（）；
对象过滤器[索引]=过滤器；
对象applyFilters（canvas.renderAll.bind（canvas））；
}
函数applyFilterValue（索引、属性、值）{
var obj=canvas.getActiveObject（）；
if（对象过滤器[索引]）{
对象过滤器[索引][属性]=值；
对象applyFilters（canvas.renderAll.bind（canvas））；
}
}
fabric.Object.prototype.padding=5；
fabric.Object.prototype.transparentCorners=false；
var canvas=this.\uu canvas=new fabric.canvas（'c'），
f=织物、图像、过滤器；
fabric.Image.fromURL（'../lib/bg.png'，函数（img）{
canvas.backgroundImage=img；
canvas.backgroundImage.width=400；
canvas.backgroundImage.height=400；
});
帆布({
“对象：选定”：函数（）{
fabric.util.toArray（document.getElementsByTagName（'input'））
.forEach（函数（el）{el.disabled=false；}）
变量过滤器=['亮度'，]；
//变量过滤器=['灰度'，'反转'，'去除白色'，'深褐色'，'深褐色'，
//“亮度”、“噪波”、“渐变透明度”、“像素化”，
//“模糊”、“锐化”、“浮雕”、“着色”、“倍增”、“混合”]；
对于（变量i=0；i

现在，您可以通过最新的Fabricjs版本1.6.6实现这一点

fabric.Image.filters.Contrast

和

fabric.Image.filters.Saturate

已添加到此版本中

我制作了一把小提琴来演示如何实现它（注意：更改

applyFilter（）

函数以实现不同的过滤器）：

---

去年我写了一个HSL插件，它可能很有用：

fabric.Image.filters.HSL = fabric.util.createClass(fabric.Image.filters.BaseFilter, {

    type: 'HSL',

    initialize: function(options) {
        options || (options = {});
        this.hue        = options.hue        || 0;
        this.saturation = options.saturation || 0;
        this.lightness  = options.lightness  || 0;
    },

    rgbToHsl: function(r, g, b) {
        r /= 255, g /= 255, b /= 255;
        var max = Math.max(r, g, b), min = Math.min(r, g, b);
        var h, s, l = (max + min) / 2;

        if (max == min) {
            h = s = 0;
        } else {
            var d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }

        return [h, s, l];
    },

    hslToRgb: function(h, s, l) {
        var r, g, b;

        if (s == 0) {
            r = g = b = l;
        } else {
            function hue2rgb(p, q, t){
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1/6) return p + (q - p) * 6 * t;
                if (t < 1/2) return q;
                if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            }

            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }
        return [r * 255, g * 255, b * 255];
    },

    applyTo: function(canvasEl) {
        var context = canvasEl.getContext('2d'),
            imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
            data = imageData.data;

        for (var i=0; i<data.length; i+=4)
        {
            // Convert RGB to HSL
            var hsl = this.rgbToHsl(data[i], data[i+1], data[i+2]);

            // Apply HSL values
            if (this.hue       ) hsl[0] = this.hue;
            if (this.saturation) hsl[1] = this.saturation;
            if (this.lightness ) hsl[2] = this.lightness;

            // Convert HSL back to RGB
            var rgb = this.hslToRgb(hsl[0], hsl[1], hsl[2]);

            // Update data
            data[i]   = rgb[0];
            data[i+1] = rgb[1];
            data[i+2] = rgb[2];
        }

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

    toObject: function() {
        return extend(this.callSuper('toObject'), {
            hue: this.hue,
            saturation: this.saturation,
            lightness: this.lightness
        });
    }
});

…其中，画布是您的FabricJS画布对象

---

我希望这能有所帮助。

据我所知，没有内置的对比度过滤器。你必须自己实施它。看看这个

var hue = 1;        // Range: 0 to 1
var brightness = 1; // Range: 0 to 1
var lightness = 1;  // Range: 0 to 1

var filterHSL = new img.filters.HSL({
    hue: hue,
    saturation: saturation,
    lightness: lightness
});

img.filters = [filterHSL];
img.applyFilters(canvas.renderAll.bind(canvas));