Question

我正在使用fabricJS。在画布上使用图像时我想增加，降低图像的亮度。为此，我使用复选框选择亮度效果，然后显示亮度范围选择器，以便用户可以选择应用于图像的亮度值。现在当我单击复选框时图像亮度增加，滑块增加亮度增加但增加后，我向下改变滑块降低亮度，图像不随亮度减小而变回，变成白色......

HTML代码：

<input type="checkbox" id="image-bright" unchecked> Brightness <br />
<div class="brightValue" style="display:none;"> Value:
<input type="range" id="bright-value" value="0" min="0" max="255" step="1" class="span22">
</div>

JS：

var imagebright=document.getElementById("image-bright");
    imagebright&&(imagebright.onclick=function(){
    if(this.checked){
        $('.brightValue').show();
        var cimg=canvas.getActiveObject();
        cimg&&"image"===cimg.type&&(
        cimg.filters.push(new fabric.Image.filters.Brightness({brightness: parseInt($('#bright-value').value, 10)})),
        cimg.applyFilters(canvas.renderAll.bind(canvas)));
     }
     else {
        $('.brightValue').hide();   
        }
    });

    var brightvalue=document.getElementById("bright-value");
    brightvalue.onchange = function(){
        var cimg=canvas.getActiveObject();  
        cimg.filters.push(new fabric.Image.filters.Brightness({brightness: parseInt(this.value, 10)}));
        cimg.applyFilters(canvas.renderAll.bind(canvas));
    };

一旦增加亮度，之后滑块亮度值减小，不降低图像亮度。取消选中时，选中“亮度”复选框，每次都会增加亮度。取消选中亮度复选框后，我要完全关闭亮度效果，即对图像没有亮度效果。请指导我在哪里更改代码。

Answer 1

您在每次更改时都会将新过滤器推送到对象上。

这就是为什么它们都会成倍增加，导致亮度越来越高。

改变这个：

cimg.filters.push(new fabric.Image.filters.Brightness({brightness: parseInt(this.value, 10)}));

到此：

cimg.filters[0].brightness = parseInt(this.value, 10);

使用输入范围滑块中的值更改Image的亮度

1 个答案: