如何获得每种效果的滤镜值？

Question

如何获取具有％和px的效果以及仅包含％和px的数字的滤镜值。

在编解码器中，我列出了3个过滤器，当然可能还会更多。

什么是最好的方法...？

代码：

<button onclick="myFunction()">Try it</button><br><br>

<img id="myImg" src="https://www.roadrunnerrecords.com/sites/g/files/g2000005056/f/sample-4.jpg"  width="300" height="300" style="filter:grayscale(100%) blur(5px) brightness(150%)">

function myFunction() {
  var grayscale = document.getElementById("myImg").style.filter;
  var blur = document.getElementById("myImg").style.filter;
  var brightness = document.getElementById("myImg").style.filter;
  alert("grayscale value = , blur value= , brightness value= ");//without % and px
  alert("grayscale value = , blur value= , brightness value= ");//with % and px
}

Answer 1

使用字符串解析技术来分离出所需的部分并创建一个对象：

var effects = element.style.filter.split(" ");
var imgFilter = {};
for (var i = 0; i < effects.length; ++i) {
    var split = effects[i].split("(");
    imgFilter[split[0]] = split[1].substring(0,split[1].length-1);
}
alert("grayscale value = "+imgFilter.grayscale+" , blur value=  "+imgFilter.blur+", brightness value=  "+imgFilter.brightness);//with % and px
alert("grayscale value = "+imgFilter.grayscale.replace(/[^\d.]/g,"")+" , blur value=  "+imgFilter.blur.replace(/[^\d.]/g,"")+", brightness value=  "+imgFilter.brightness.replace(/[^\d.]/g,""));//without % and px