javascript - 如何根据范围输入值添加图像过滤器？

Question

我有一个范围输入，用于捕获显示图像上棕褐色滤镜的百分比。我有范围输入本身的 html，还有几行 javascript，实际上是为了改变图像的过滤器。但是，javascript 不工作。在这里，有什么想法吗？:HTML:

<input id="sepia" type="range" oninput="set(this);" value="0" step="0.1" min="0" max="1"> Sepia <span id="Amount">(0)</span><br/>


<input id="grayscale" type="range" oninput="set(this);" value="0" step="0.1" min="0" max="1"> Grayscale <span id="Amount2">(0)</span><br/>

CSS:

.wrap img {
    position:relative;
    z-index:1;
    margin: none;
    top:0%;
    bottom:0%;
    vertical-align: bottom;
    -webkit-filter: none;
   }

JS:

function set(e){
document.getElementById('img_prev').style["webkitFilter"] = "sepia("+e.value+")";
document.getElementById('Amount').innerHTML="("+e.value+")";
}


function set(e){
document.getElementById('img_prev').style["webkitFilter"] = "grayscale("+e.value+")";
document.getElementById('Amount2').innerHTML="("+e.value+")";
}

Answer 1

因为你只使用 webkit 过滤器 我只会在演示中显示它，但你可以添加 msFilter webkitFilter mozFilter oFilter 用于其他浏览器支持。

You should be targeting the image ID, not the container ID with the image ID.

function set(e){
//  Target the image ID (img_prev)          (Filter)
document.getElementById('img_prev').style["webkitFilter"] = "sepia("+e.value+")";
document.getElementById('Amount').innerHTML="("+e.value+")";
}

<input id="sepia" type="range" oninput="set(this);" value="0" step="0.1" min="0" max="1"> Sepia <span id="Amount">(0)</span><br/>
<img id="img_prev" src="http://i.stack.imgur.com/2lRQ9.png"/>

如果您对上面的源代码有任何疑问，请在下面发表评论。

希望对您有所帮助。编码愉快!

Update: New snippet Only one filter will apply.

function set(e, f){
//  Target the image ID (img_prev)          (Filter)
document.getElementById('img_prev').style["webkitFilter"] = f+"("+e.value+")";
document.getElementById('Amount_'+f).innerHTML="("+e.value+")";
}

<input id="sepia" type="range" oninput="set(this, 'sepia');" value="0" step="0.1" min="0" max="1"> Sepia <span id="Amount_sepia">(0)</span><br/>
<input id="grayscale" type="range" oninput="set(this, 'grayscale');" value="0" step="0.1" min="0" max="1"> Grayscale <span id="Amount_grayscale">(0)</span><br/>
<img id="img_prev" src="http://i.stack.imgur.com/2lRQ9.png"/>