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