2

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???
maja
  • 177
  • 1
  • 13
  • Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. – Paulie_D Apr 07 '20 at 10:42
  • I just thought the question was clear .. Ok my mistake ..., I need the value of grayscale blur and brightness ..., their numbers are 100%, 5px, 150%, and in the second alert without % and px... – maja Apr 07 '20 at 10:47

2 Answers2

2

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)" />
Community
  • 1
  • 1
DenverCoder1
  • 2,253
  • 1
  • 10
  • 23
  • eyl327 Thanks and wow... The one described above does the same....., but I used the first code you posted before editing and it works great. The only one that doesn't do hue-rotate maybe because is not using (%) but (deg) ...., The first code was: imgFilter.hue-rotate.replace (/ [^ \ d.] / G, ""). How do I get this to work and hue rotate? – maja Apr 09 '20 at 12:51
  • @maja The hyphen in `hue-rotate` is treated as a minus sign if you use the dot. You can use the other syntax for object access which looks like: `imgFilter["hue-rotate"]`. With units: `imgFilter["hue-rotate"].withUnits`, without units: `imgFilter["hue-rotate"].withoutUnits`. This is also equivalent to `imgFilter["hue-rotate"]["withUnits"]` and `imgFilter["hue-rotate"]["withoutUnits"]`. – DenverCoder1 Apr 09 '20 at 19:48
  • eyl327 Hi. I added in the post, I edited ..., your first javascript code ... but how do I put hue-rotate in it? i try no but i don't get the result ...See above in the first question post... – maja Apr 11 '20 at 06:58
  • @maja It already works for everything including hue-rotate. You just need to use `imgFilter["hue-rotate"]` instead of `imgFilter.hue-rotate` to access it. – DenverCoder1 Apr 11 '20 at 17:27
  • @maja I have added another snippet that adds hue-rotate to the code in your edit. – DenverCoder1 Apr 11 '20 at 17:34
  • Sometimes the eye can't see what's in front of his nose ... Thank you! :) I posted a new question that is challenging because it is "impossible" .. maybe with the help of javascript or css manipulation...., but I can't find the answer ... https://stackoverflow.com/questions/61138770/how-make-child-element-above-child-element-z-index?noredirect=1#comment108160592_61138770 – maja Apr 12 '20 at 20:41
0

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
x1n13y84issmd42
  • 890
  • 9
  • 17