wie man Kontrast und Sättigung mit fabric.js einstellen

Question

Ich möchte Kontrast, Sättigung und Farbton in meinem Bildbearbeitungsprogramm einstellen. dafür verwende ich fabric.js aber nur Helligkeit Option ..

Hier den

js Code meines Stoffes ist, können

(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)); 
    }; 

})(); 

Answer 1

Sie dies tun, jetzt mit dem neuesten Fabricjs Release 1.6.6

fabric.Image.filters.Contrast und fabric.Image.filters.Saturate wurden in dieser Version hinzugefügt.

machte ich eine Geige Ihnen zu zeigen, wie es zu erreichen (Anmerkung: Ändern Sie die applyFilter() Funktion zu verschiedenen Filtern zu erreichen):

DEMO

Answer 2

Letztes Jahr habe ich ein HSL-Plugin geschrieben, die ihnen nützlich sein könnten:

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 
     }); 
    } 
}); 

zu Ihrer Seite hinzufügen nach FabricJS und wie diese geladen ist nennen:

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)); 

... wo Leinwand ist Ihr FabricJS-Leinwandobjekt.

Ich hoffe, das hilft.