Fabric js图像过滤器答案

【问题标题】：Fabric js Image FiltersFabric js图像过滤器
【发布时间】：2020-01-20 12:28:39
【问题描述】：

您好，我正在尝试创建 img 过滤器，有范围输入滑块，用户从中选择过滤器值，然后将其应用于所选图像对象，但每次输入更改时，它都会添加一个新过滤器并乘以我如何在下面解决此问题是我的代码：

  $('.img-fillter-controller .range-field').on("change", "input", function () {

    t = $(this).data("filter");
    v = $(this).val();
    o = activeCanvas.getActiveObject();
    switch(t) {

        case 'brightness':
              f = new fabric.Image.filters.Brightness({brightness: v/100 });
              applyImgFilter(f);
              return;
        case 'saturation':

              return;
        case 'contrast':

              return;
        case 'blur':

              return;
        case 'exposure':

              return;
        case 'colorify':

              return;
        case 'hue':




    }   
});

function applyImgFilter(f) {
    o.filters.push(f);
    o.applyFilters();
    activeCanvas.renderAll();
}

【问题讨论】：

标签： fabricjs

【解决方案1】：

为了在图像上正确应用过滤器，我们需要修复过滤器索引或者可以说通过静态索引分配过滤器。

你应该替换这个函数：

function applyImgFilter(f) {
  o.filters.push(f);
  o.applyFilters();
  activeCanvas.renderAll();
}

新增功能：

function applyImgFilter(f) {
  o.filters[0] = f
  o.applyFilters();
  activeCanvas.renderAll();
}

【讨论】：