fabric.js kullanarak kontrast ve doygunluk nasıl ayarlanır

Question

Görüntü düzenleyicimde kontrast, doygunluk ve renk tonu ayarlamak istiyorum. Bu i fabric.js kullanmak ancak yalnızca parlaklık seçeneği var .. İşte

benim kumaşın js kodu

(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

olduğunu Artık, son Fabricjs sürümü ile yapabilirsiniz 1.6.6

Bu sürümde

fabric.Image.filters.Contrast ve fabric.Image.filters.Saturate eklenmiştir.

nasıl bunu başarmak için size göstermek için bir keman yapımı (not: farklı filtreler elde etmek applyFilter() fonksiyonunu değiştirme):

DEMO

Answer 2

Geçen yıl kullanım olabilir bir HSL eklentisi yazdım:

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 yüklendikten sonra sayfanıza ekleyin ve böyle diyoruz:

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

... burada tuval, FabricJS tuval nesnesindir.

Umarım bu yardımcı olur.