Измените яркость изображения со значением от ползунка диапазона ввода

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)); 
    }; 

раз увеличить яркость, затем снижение яркости значения в ползуне, не уменьшая яркость изображения. Когда я снимаю флажок, установите флажок Яркость, каждый раз увеличивая яркость. снимите флажок яркости. Я хочу полностью отключить эффект яркости, то есть эффект яркости изображения не будет отображаться. PLS руководство меня, где изменить код.

Answer 1

Вы нажимаете новый фильтр на объект при каждом изменении.

Вот почему все они размножаются, что приводит к более высокой и повышенной яркости.

Изменить это:

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

к этому:

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