如何添加基于范围输入值的图像过滤器？

问题描述

我有一个范围输入，意在捕捉显示图像上的棕褐色过滤器的百分比。我有范围输入本身的html，以及几行javascript，其目的是实际改变图像的过滤器。但是，JavaScript不起作用。
HTML：

 < input id =sepiatype =range oninput =set（this）; value =0step =0.1min =0max =1>棕褐色< span id =金额>（0）< / span>< br /> 
 
 
< input id =grayscaletype =rangeoninput =set（this）; value =0step =0.1min =0max =1>灰度< span id =Amount2>（0）< / span>< br /> 
  

CSS：

  .wrap img {
 position：relative; 
 z-index：1; 
保证金：无; 
 top：0％; 
底部：0％; 
 vertical-align：bottom; 
 -webkit-filter：none; 
 
  

JS：

 函数集（e）{
 document.getElementById（'img_prev'）。style [webkitFilter] =sepia（+ e.value +）; 
 document.getElementById（'Amount'）。innerHTML =（+ e.value +）; 
} 
 
 
函数集（e）{
 document.getElementById（'img_prev'）。style [webkitFilter] =灰度（+ e。值+ ）; 
 document.getElementById（'Amount2'）。innerHTML =（+ e.value +）; 
 
  

解决方案

webkit filter 我只会在演示中显示，但您可以添加 msFilter webkitFilter mozFilter oFilter 用于其他浏览器支持。

< input id =sepiatype = rangeoninput =set（this，'sepia'）; value =0step =0.1min =0max =1> Sepia< span id =Amount_sepia>（0）< / span>< br />< input id =grayscaletype =rangeoninput =set（this，'grayscale'）; value =0step =0.1min =0max =1>灰度< span id =Amount_grayscale>（0）< / span>< br />< img id =img_prevsrc =http://i.stack.imgur.com/2lRQ9。 png/>

I have a range input that is meant to catch the percentage of sepia filter on a displayed image. I have the html for the range input itself, and a few lines a javascript that are meant to actually change the filter of the image. However, the javascript is not working. Here it is, any ideas?: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+")";
}

解决方案

Since you're only using webkit filter I will only display that in the demo but you can add msFilter webkitFilter mozFilter oFilter for other browser support.

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"/>

If you have any questions about the source code above please leave a comment below.

I hope this helps. Happy coding!

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"/>

这篇关于如何添加基于范围输入值的图像过滤器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！