0

我正在使用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));
    };

一旦增加亮度，然后减少滑块中的亮度值，而不是降低图像的亮度。当我取消选中时，选中亮度复选框，它每次都会增加亮度。取消选中亮度复选框后，我想完全关闭亮度效果，即对图像没有亮度效果。请指导我在哪里更改代码。

4

1 回答 1

1

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

这就是为什么它们都成倍增加，从而产生越来越高的亮度。

改变这个：

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

对此：

cimg.filters[0].brightness = parseInt(this.value, 10);
于 2013-10-07T11:49:41.453 回答