Fabric JS removeColor功能过滤器不起作用

Posted 2023-03-25

【中文标题】Fabric JS removeColor功能过滤器不起作用

【英文标题】：Fabric JS removeColor function filter not work

【发布时间】：2021-05-05 22:16:03

【问题描述】：

我正在使用带有 jQ​​uery 1.12.4 的 Fabric js 版本 4.3.1，并在选择要加载到画布中的图像时尝试让 removeColor 过滤器工作。 当我将图像加载到画布中时，一切都很好，但是当我尝试通过选择过滤器来移除颜色时，它就不起作用了。

这是我的代码：

bodybackground: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>

问题出在哪里？

【参考方案1】：

我认为您正在使用已弃用的功能，您应该看看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);
            );

【讨论】：

我用 $("#remove-color").change(function() 尝试了你的代码，结果是我在画布中的图像是重复的。过滤器有效，但是当我激活过滤器时图像是重复的. 我只想对当前应用过滤器。我该怎么做才能不复制图像？谢谢

只需使用我从第 3 行到第 9 行的代码（不要忘记渲染画布），其中 oImg 将是您当前的活动对象。它应该去除绿色

非常好的人！谢谢你。请问最后两个问题：1）为什么当我将图像移动到画布上时会看到颜色去除效果，而不是点击#remove-color输入时？ 2）我可以让颜色和距离值像这样动态吗（颜色：$（“#remove-color”）.value，距离：$（“#remove-color-distance”）.value）？

我希望 removeColor 效果像这个例子一样发生：fabricjs.com/image-filters

乐于助人！ 1）我不确定我是否理解这个问题 2）是的，你可以！如果有人遇到同样的问题，我提出的价值观可以给出一个普遍的答案