Fabric JS removeColor function filter not work

Question

I'm using Fabric js version 4.3.1 with jQuery 1.12.4 and trying to get the removeColor filter to work when I choose the image to load in the canvas. When I load the image into the canvas everything is fine, but when I try to remove the color by selecting the filter it doesn't work.

This is my code:

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>

Where is the issue?

Answer 1

I think you are using a deprecated function, you sould take a look at fabric.Image.filters.RemoveColor function. Here an example:

                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);
            });