Fabric JS removeColor 函数过滤器不起作用
Fabric JS removeColor function filter not work
我将 Fabric js 版本 4.3.1 与 jQuery 1.12.4 一起使用,并在我选择要在 canvas 中加载的图像时尝试让 removeColor 滤镜工作。
当我将图像加载到 canvas 时,一切都很好,但是当我尝试通过选择滤镜来移除颜色时,它不起作用。
这是我的代码:
body{background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<div id="contCanvasLogo" style="float:left;width:100%;">
<canvas id="canvas" class="resize canvasLogo"></canvas>
<input type="file" id="file-input">
<div id="bench"></div>
<p>
<label><span>Remove color:</span> <input type="checkbox" id="remove-color" disabled=""></label><br>
<label>Color: <input type="color" id="remove-color-color" value="#00f900"></label><br>
<br>
<label>Distance: <input type="range" id="remove-color-distance" value="0.02" min="0" max="1" step="0.01" disabled=""></label>
</p>
</div>
<script>
var canvas = this.__canvas = new fabric.Canvas('canvas'), f = fabric.Image.filters;
canvas.setHeight(200);
canvas.setWidth(400);
document.getElementById('file-input').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({ format: 'png', quality: 0.8 });
console.log("Canvas Image " + dataURL);
});
};
reader.readAsDataURL(file);
});
function applyFilter(index, filter) {
var obj = canvas.getActiveObject();
obj.filters[index] = filter;
var timeStart = +new Date();
obj.applyFilters();
var timeEnd = +new Date();
var dimString = canvas.getActiveObject().width + ' x ' +
canvas.getActiveObject().height;
$('bench').innerHTML = dimString + 'px ' +
parseFloat(timeEnd-timeStart) + 'ms';
canvas.renderAll();
}
function getFilter(index) {
var obj = canvas.getActiveObject();
return obj.filters[index];
}
function applyFilterValue(index, prop, value) {
var obj = canvas.getActiveObject();
if (obj.filters[index]) {
obj.filters[index][prop] = value;
var timeStart = +new Date();
obj.applyFilters();
var timeEnd = +new Date();
var dimString = canvas.getActiveObject().width + ' x ' +
canvas.getActiveObject().height;
$('bench').innerHTML = dimString + 'px ' +
parseFloat(timeEnd-timeStart) + 'ms';
canvas.renderAll();
}
}
canvas.on({
'selection:created': function() {
fabric.util.toArray(document.getElementsByTagName('input'))
.forEach(function(el){ el.disabled = false; })
var filters = ['remove-color'];
for (var i = 0; i < filters.length; i++) {
$(filters[i]) && (
$(filters[i]).checked = !!canvas.getActiveObject().filters[i]);
}
},
'selection:cleared': function() {
fabric.util.toArray(document.getElementsByTagName('input'))
.forEach(function(el){ el.disabled = true; })
}
});
$('remove-color').onclick = function () {
applyFilter(2, this.checked && new f.RemoveColor({
distance: $('remove-color-distance').value,
color: $('remove-color-color').value,
}));
};
$('remove-color-color').onchange = function() {
applyFilterValue(2, 'color', this.value);
};
$('remove-color-distance').oninput = function() {
applyFilterValue(2, 'distance', this.value);
};
</script>
问题出在哪里?
我认为您使用的是已弃用的函数,您应该看看 fabric.Image.filters.RemoveColor 函数。
举个例子:
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 0, top: 0}).scale(0.5);
var filter = new fabric.Image.filters.RemoveColor({
color: "#008000",
threshold: 0.2,
distance: 0.5,
});
oImg.filters.push(filter);
oImg.applyFilters();
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
});
我将 Fabric js 版本 4.3.1 与 jQuery 1.12.4 一起使用,并在我选择要在 canvas 中加载的图像时尝试让 removeColor 滤镜工作。 当我将图像加载到 canvas 时,一切都很好,但是当我尝试通过选择滤镜来移除颜色时,它不起作用。
这是我的代码:
body{background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<div id="contCanvasLogo" style="float:left;width:100%;">
<canvas id="canvas" class="resize canvasLogo"></canvas>
<input type="file" id="file-input">
<div id="bench"></div>
<p>
<label><span>Remove color:</span> <input type="checkbox" id="remove-color" disabled=""></label><br>
<label>Color: <input type="color" id="remove-color-color" value="#00f900"></label><br>
<br>
<label>Distance: <input type="range" id="remove-color-distance" value="0.02" min="0" max="1" step="0.01" disabled=""></label>
</p>
</div>
<script>
var canvas = this.__canvas = new fabric.Canvas('canvas'), f = fabric.Image.filters;
canvas.setHeight(200);
canvas.setWidth(400);
document.getElementById('file-input').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({ format: 'png', quality: 0.8 });
console.log("Canvas Image " + dataURL);
});
};
reader.readAsDataURL(file);
});
function applyFilter(index, filter) {
var obj = canvas.getActiveObject();
obj.filters[index] = filter;
var timeStart = +new Date();
obj.applyFilters();
var timeEnd = +new Date();
var dimString = canvas.getActiveObject().width + ' x ' +
canvas.getActiveObject().height;
$('bench').innerHTML = dimString + 'px ' +
parseFloat(timeEnd-timeStart) + 'ms';
canvas.renderAll();
}
function getFilter(index) {
var obj = canvas.getActiveObject();
return obj.filters[index];
}
function applyFilterValue(index, prop, value) {
var obj = canvas.getActiveObject();
if (obj.filters[index]) {
obj.filters[index][prop] = value;
var timeStart = +new Date();
obj.applyFilters();
var timeEnd = +new Date();
var dimString = canvas.getActiveObject().width + ' x ' +
canvas.getActiveObject().height;
$('bench').innerHTML = dimString + 'px ' +
parseFloat(timeEnd-timeStart) + 'ms';
canvas.renderAll();
}
}
canvas.on({
'selection:created': function() {
fabric.util.toArray(document.getElementsByTagName('input'))
.forEach(function(el){ el.disabled = false; })
var filters = ['remove-color'];
for (var i = 0; i < filters.length; i++) {
$(filters[i]) && (
$(filters[i]).checked = !!canvas.getActiveObject().filters[i]);
}
},
'selection:cleared': function() {
fabric.util.toArray(document.getElementsByTagName('input'))
.forEach(function(el){ el.disabled = true; })
}
});
$('remove-color').onclick = function () {
applyFilter(2, this.checked && new f.RemoveColor({
distance: $('remove-color-distance').value,
color: $('remove-color-color').value,
}));
};
$('remove-color-color').onchange = function() {
applyFilterValue(2, 'color', this.value);
};
$('remove-color-distance').oninput = function() {
applyFilterValue(2, 'distance', this.value);
};
</script>
问题出在哪里?
我认为您使用的是已弃用的函数,您应该看看 fabric.Image.filters.RemoveColor 函数。 举个例子:
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 0, top: 0}).scale(0.5);
var filter = new fabric.Image.filters.RemoveColor({
color: "#008000",
threshold: 0.2,
distance: 0.5,
});
oImg.filters.push(filter);
oImg.applyFilters();
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
});