Fabric js - 重置活动对象上的所有操作/过滤器

如何解决Fabric js - 重置活动对象上的所有操作/过滤器

在我的项目中，我试图弄清楚如何重置我对图像所做的所有更改。

示例： 如果我从我的图像中删除两种颜色，我希望当我点击按钮#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>