问题描述
在我的项目中,我试图弄清楚如何重置我对图像所做的所有更改。
示例: 如果我从我的图像中删除两种颜色,我希望当我点击按钮#remove 时,图像会返回到前一个,没有更改,也没有过滤器。
我的代码是这样的:
$(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
canvas.setHeight('300');
canvas.setWidth('800');
canvas.renderAll();
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: 10,top: 10,angle: 00}).scale(0.8);
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);
});
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.padding = 5;
$("#remove-color-color").change(function(){
var oImg = canvas.getActiveObject();
var filter = new fabric.Image.filters.RemoveColor({
color: $(this).val(),threshold: 0.2,distance: 0.5,});
oImg.filters.push(filter);
oImg.applyFilters();
canvas.renderAll();
});
$(".removeItem").click(function(){
canvas.remove(canvas.getActiveObject());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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" style="width:500px;height:500px;border:1px solid #ccc;"></canvas>
<input type="file" id="file-input">
<input type="color" id="remove-color-color" />
</div>
<br/>
<button class="removeItem" >Remove</button>
<button class="reset" >Reset</button>
如何重置 activeObject 上的所有过滤器?
解决方法
要清除对象上的所有过滤器,只需将过滤器设置为空数组,然后运行 applyFilters()
,然后运行 renderAll()
obj.filters = [];
obj.applyFilters();
canvas.renderAll();
$(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
canvas.setHeight('300');
canvas.setWidth('800');
canvas.renderAll();
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: 10,top: 10,angle: 00
}).scale(0.8);
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);
});
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.padding = 5;
$("#remove-color-color").change(function() {
var oImg = canvas.getActiveObject();
if(!oImg) return;
var filter = new fabric.Image.filters.RemoveColor({
color: $(this).val(),threshold: 0.2,distance: 0.5,});
oImg.filters.push(filter);
oImg.applyFilters();
canvas.renderAll();
});
$(".removeItem").click(function() {
var obj = canvas.getActiveObject();
if(obj) canvas.remove(obj);
});
$(".reset").click(function() {
var obj = canvas.getActiveObject();
if(!obj) return;
obj.filters = [];
obj.applyFilters();
canvas.renderAll();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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" style="width:500px;height:500px;border:1px solid #ccc;"></canvas>
<input type="file" id="file-input">
<input type="color" id="remove-color-color" />
</div>
<br/>
<button class="removeItem">Remove</button>
<button class="reset">Reset</button>