javascript - 如何获得每个效果的过滤器值？

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
}

function myFunction() {
var effects = document.getElementById("myImg").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
} // How to add Hue-rotate???

Answer 1

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

function myFunction() {
    var element = document.getElementById("myImg");
    
    // split filter string into an array of effects
    var effects = element.style.filter.split(" ");
    var imgFilter = {};
    for (var i = 0; i < effects.length; ++i) {
        // use regex to match value before parenthesis and value inside
        var matches = effects[i].match(/(.*)\((.*)\)/);
        // create a key with the effect name (ex. "grayscale")
        imgFilter[matches[1]] = {};
        // set the withUnits value to the number that is in the parenthesis
        imgFilter[matches[1]]["withUnits"] = matches[2];
        // remove characters that are not digits or periods using regex
        imgFilter[matches[1]]["withoutUnits"] = matches[2].replace(/[^\d.]/g,"");
    }
    
    //with % and px
    for (var i = 0, log = ""; i < Object.keys(imgFilter).length; ++i) {
      log += Object.keys(imgFilter)[i] + " value = " + imgFilter[Object.keys(imgFilter)[i]].withUnits + ", ";
    }
    alert(log);
    
    //without % and px
    for (var i = 0, log = ""; i < Object.keys(imgFilter).length; ++i) {
      log += Object.keys(imgFilter)[i] + " value = " + imgFilter[Object.keys(imgFilter)[i]].withoutUnits + ", ";
    }
    alert(log);
}

<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%) hue-rotate(180deg)" />

效果: "grayscale(100%) blur(5px) brightness(150%)" , 对象 imgFilter创建的具有以下值(value):

{
    "grayscale": {
        "withUnits": "100%",
        "withoutUnits": "100"
    },
    "blur": {
        "withUnits": "5px",
        "withoutUnits": "5"
    },
    "brightness": {
        "withUnits": "150%",
        "withoutUnits": "150"
    }
}

您可以通过使用访问任何特定值，例如 imgFilter.grayscale.withUnits获取 "100%"或 imgFilter.blur.withoutUnits获取 "5" .
要访问包含连字符的效果(例如 hue-rotate )，您需要使用引号和括号访问该值，例如， imgFilter["hue-rotate"].withUnits .
将色调旋转添加到您在编辑中使用的版本:

function myFunction() {
var effects = document.getElementById("myImg").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("hue-rotate value = "+imgFilter["hue-rotate"]+" , grayscale value = "+imgFilter.grayscale+" , blur value=  "+imgFilter.blur+", brightness value=  "+imgFilter.brightness);//with % and px
alert("hue-rotate value = "+imgFilter["hue-rotate"].replace(/[^\d.]/g,"")+" , grayscale value = "+imgFilter.grayscale.replace(/[^\d.]/g,"")+" , blur value=  "+imgFilter.blur.replace(/[^\d.]/g,"")+", brightness value=  "+imgFilter.brightness.replace(/[^\d.]/g,""));//without % and px
}

<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%) hue-rotate(180deg)" />