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 に答える