How to set contrast and saturation using fabric.js

Question

I want to set contrast, saturation and hue in my image editor. I use fabric.js for this, but it only has a brightness option.

Here is my js java code

(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

Last year, I wrote an HSL plugin that can be useful:

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

Add to your page after FabricJS has loaded and called like this:

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

... where the canvas is your Canvas FabricJS object.

Hope this helps.

Answer 2

You can now do this with the latest version of Fabricjs, 1.6.6

fabric.Image.filters.Contrast and fabric.Image.filters.Saturate were added to this release.

I made a fiddle to show you how to achieve it (note: change the applyFilter() function to achieve different filters):

Demo