Javascript aracılığıyla CSS filtre değerlerini değiştirme

Question

Çok temel bir görüntü düzenleyici üzerinde çalışıyorum ancak gerçek css filtre değerlerini etkilemek için aralık girdi kaydırıcılarını (# fx-kaydırıcı) alamıyorum.

function ChangeFilter() { 
 

 
    var ifx = document.getElementById("canvasFrame"); 
 
    var br = document.getElementById("br"); 
 
    var ct = document.getElementById("ct"); 
 
    var st = document.getElementById("saturate"); 
 

 
ifx.style.WebkitFilter = "brightness(" + br.value * 10 + "%)"); 
 
ifx.style.filter = "brightness(" + br.value * 10 + "%)"); 
 

 
ifx.style.WebkitFilter = "contrast(" + ct.value * 10 + "%)"); 
 
ifx.style.filter = "contrast(" + ct.value * 10 + "%)"); 
 

 
ifx.style.WebkitFilter = "saturate(" + st.value * 10 + "%)"); 
 
ifx.style.filter = "saturate(" + st.value * 10 + "%)"); 
 
}

#canvasFrame { 
 
    width:100px; 
 
    height:50px; 
 
    filter: brightness(100%) contrast(100%) saturate(100%); 
 
    -webkit-filter: brightness(100%) contrast(100%) saturate(100%); 
 
}

<div class="canvasFrame"> 
 
    <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" alt="image"> 
 
</div> 
 
<div class="fx-slider"> 
 
    <label for="br">Brightness</label> 
 
    <input id="br" name="br" type="range" min="0" max="200" value="100" onchange="ChangeFilter()"> 
 
</div> 
 
<div class="fx-slider"> 
 
    <label for="ct">Contrast</label> 
 
    <input id="ct" name="ct" type="range" min="0" max="200" value="100" onchange="ChangeFilter()"> 
 
</div> 
 
<div class="fx-slider"> 
 
    <label for="st">Saturation</label> 
 
    <input id="st" name="ct" type="range" min="0" max="200" value="100" onchange="ChangeFilter()"> 
 
</div>

Herhangi bir yardım mutluluk duyacağız: Bu kod olduğunu! Teşekkürler. :)

Answer 1

Tuval kabınıza bir kimlik eklemeniz ve doygunluk kontrolünüz için yanlış kimliği kullanmanız gerekir. Ayrıca, 3 kontrolü birleştirmelisiniz, aksi takdirde yalnızca doygunluk seviyesini ayarlayabilirsiniz.

function ChangeFilter() { 
    var ifx = document.getElementById("canvasFrame"); //need to update this id in you html 
    var br = document.getElementById("br"); 
    var ct = document.getElementById("ct"); 
    var st = document.getElementById("st"); //this id was wrong in your code 

    //set all 3 filter values at once. 
    ifx.style.webkitFilter = "brightness(" + br.value * 10 + "%) contrast(" + ct.value * 10 + "%) saturate(" + st.value * 10 + "%)"; 
    ifx.style.filter = "brightness(" + br.value * 10 + "%) contrast(" + ct.value * 10 + "%) saturate(" + st.value * 10 + "%)"; 
} 

CodePen: http://codepen.io/nobrien/pen/BKmevp