Question

我有一个范围输入，用于捕捉显示图像上的棕褐色滤镜的百分比。我有范围输入本身的html，以及几行javascript，旨在实际更改图像的过滤器。但是，javascript无法正常工作。在这里，任何想法？： HTML：

app.directive('baseDirective', function (someDirectiveDependency) {
  return {
    controller: function () {
      // ...
    }
  };
})

app.directive('someDirective', function (baseDirectiveDirective) {
  return angular.extend({}, baseDirectiveDirective[0], {
    templateUrl: '...',
    // the inheritance of 'name' property may cause problems later
    name: undefined
  });
})

CSS：

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

JS：

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

Answer 1

由于您仅使用webkit filter，我只会在演示中显示该内容，但您可以添加msFilter webkitFilter mozFilter oFilter以获取其他浏览器支持。

您应该定位图片ID，而不是带有图片ID的容器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"/>

如果您对上述源代码有任何疑问，请在下面留言。

我希望这会有所帮助。快乐的编码！

更新：新代码段只应用一个过滤器。

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

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

1 个答案: