Как получить значение фильтра для каждого эффекта?

Question

Как получить значение фильтра для каждого эффекта с % и px и только числами без % и px.

В коде c я перечислил 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 имеет следующие значения:

{
    "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.

Добавление hue-rotate к версии, которую вы используете при редактировании:

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

Answer 2

Вам нужно как-то разобрать его вручную, регулярное выражение сделает:

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