Fabric js图像过滤器

Question

您好，我尝试创建img过滤器，这里有Range输入滑块，用户可以从中选择过滤器值，然后将其应用于选定的图像对象，但是每次输入更改时，它都会添加一个新的过滤器并在下面解决这个问题的方法倍增是我的代码：

  $('.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();
}

Answer 1

删除“ o.filters.push（f）” 并添加“ o.filters [0] = f”