How to get filter value for each effect?

user_11593555 0
Viewed 594

How to get filter value for each effect with % and px and only numbers without % and px.

In the codec I have listed 3 filters (of course there may be more).

What is the best way?

<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???
css-filters function css dom javascript
2 Answers

Using string parsing techniques to separate out the needed parts and create an object:

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

For the effects: "grayscale(100%) blur(5px) brightness(150%)", the object imgFilter that is created has these value:

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

You can access any particular value by using, for example imgFilter.grayscale.withUnits to get "100%" or imgFilter.blur.withoutUnits to get "5".

For accessing effects that contain hyphens (such as hue-rotate), you will need to access the value using quotes and brackets, for example, imgFilter["hue-rotate"].withUnits.

Adding hue-rotate to the version you are using in your edit:

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

user_116080640

You'll need to parse it manually somehow, regex will do:

let filter = document.getElementById("myImg").style.filter;
let filterProps = Object.fromEntries(filter.split(" ").map((v) => {let m=v.match(/([a-z-]+)\((\d+)(%|px)\)/); return [m[1], m[2]]}));

filterProps.grayscale;  // 100
filterProps.blur;       // 5
filterProps.brightness; // 150
user_18031350
Related