I am looking to adjust the contrast, saturation, and hue in my image editor using fabric.js. However, I have only been able to find the brightness option.
Below is the code I have been using with fabric 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));
};
})();