fabricjs - Fabric js图像过滤器

Question

您好，我正在尝试创建 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

Answer 1

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

您应该替换此功能：

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

新功能：

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