Fabric js - 重置活动对象上的所有 actions/filters

Question

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

示例：如果我从我的图像中删除两种颜色，我希望当我单击按钮#remove 图像 returns 到上一个没有更改和过滤器的情况下。

我的代码是这样的：

$(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 上的所有过滤器？

Answer 1

要清除对象上的所有过滤器，只需将过滤器设置为空数组，然后运行 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>

Fabric js - 重置活动对象上的所有 actions/filters

Fabric js - reset all actions/filters on active object

javascript

html

jquery

html5-canvas

fabricjs