使用滑块使用Java更改图像CSS过滤器

Question

I'm trying to change the css filter (hue-rotate to be exact) on a png by using a slider input. 我正在尝试通过使用滑块输入来更改png上的css过滤器（准确地说是色调旋转）。 I keep getting "-webkit-filter:hue-rotate( undefined deg)" 我不断收到“ -webkit-filter：hue-rotate（ undefined deg）”

Thanks for your help! 谢谢你的帮助！

Here's my code: 这是我的代码：

 function hueFunction(hueVal) { var setAs = hueVal + "deg" document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")") }

 <input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.hueVal)"> <br/> <img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">

Answer 1

Change oninput="hueFunction(this.hueVal)" to oninput="hueFunction(this.value)" 将oninput="hueFunction(this.hueVal)"更改为oninput="hueFunction(this.value)"

 function hueFunction(hueVal) { var setAs = hueVal + "deg" document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")") }

 <input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)"> <br/> <img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">

使用滑块使用Java更改图像CSS过滤器

问题描述

1 个解决方案

解决方案1
2 2017-10-03 20:40:04

使用滑块使用Java更改图像CSS过滤器

问题描述

1 个解决方案

解决方案1 2 2017-10-03 20:40:04

解决方案1
2 2017-10-03 20:40:04