Tuesday, 10 September 2013

how to add cutom color in to fabric image filteration in fabric js

how to add cutom color in to fabric image filteration in fabric js

This is my code
$('invert').onclick = function() {
alert("invert");[enter link description here][1]
applyFilter(0, this.click && new f.Sepia());
};
how can i add this custom color insted of applyFilter(0, this.click && new
f.Sepia());
var $ = function(id){return document.getElementById(id)};
function applyFilter(index, 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));
}
}
canvas.on({
'object:selected': function() {
fabric.util.toArray(document.getElementsByTagName('input'))
.forEach(function(el){ el.disabled = false; })
var filters = [ 'invert'];
for (var i = 0; i < filters.length; i++) {
$(filters[i]).checked = !!canvas.getActiveObject().filters[i];
}
},
'selection:cleared': function() {
fabric.util.toArray(document.getElementsByTagName('input'))
.forEach(function(el){ el.disabled = true; })
}
});
fabric.Image.fromURL('google.jpg', function(img) {
var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
});
$('invert').onclick = function() {
alert("invert");[enter link description here][1]
applyFilter(0, this.click && new f.Sepia());
};
when user can upload there image and he can change their custom color

No comments:

Post a Comment