0

Lo que hace mi codigo es c ambiar el filtro de una imagen. Es decir, con un input type range (un slider) lo deslizo para cambiar los valores y modificar el filtro de la imagen.

Mi problema es que cuando cambio uno el otro no se aplica, es decir, es como que se elimina el valor anterior y se reescribe el style en el html.

Quiero algo como esto: https://webdevtrick.com/demos/css-filter-editor/

Mi codigo es:

JS:

function hueFunction(hueVal1) {
    var setAs = hueVal1 + "deg"
    document.getElementById("chasis").setAttribute("style", "filter:hue-rotate(" + setAs + ");")
  }

function Iluminacion(hueVal2) {
    var Ilumina = hueVal2 + "%"
    document.getElementById("chasis").setAttribute("style", "filter:brightness(" + Ilumina + ")")
  }

HTML INPUT:

<div>
Matiz
<input id="input-slide" type="range" data-default="0" value="0" min="0" max="2000" step="1" id="hue-rotate" oninput="hueFunction(this.value)">
</div>
    
<div>
Iluminacion
<input id="input-slide" type="range" data-default="0" value="0" min="0" max="500" step="1" id="iluminacion" oninput="Iluminacion(this.value)">
</div>
    

HTML IMAGE:

<img id="chasis" src="image/chasis/1.png"  alt="" class="img-responsive"/>

2 respuestas 2

0

1: para aplicar dos filtros css simultaneamente los puedes concatenar así:

#chasis {
    filter: brightness(1.5) hue-rotate(100deg);
}
  1. En el javaScript estoy utilizando una sola función que construye la regla css en base al valor de los dos deslizadores
function hueLig(){
    var setAs = hue.value;   
    var Ilumina = lig.value;
    chasis.setAttribute("style", `filter:brightness(${Ilumina}) hue-rotate(${setAs}deg)`)
  }

Además estoy utilizando un event listener para cada uno de los deslizadores

  1. Por favor observa que los valores maximos de los deslizadores son 360 para hue (un circulo completo tiene 360º) y 3 para brightness.

let chasis = document.getElementById("chasis")

//todos los deslizadores
let deslizadores = document.querySelectorAll("input");
//para cada uno de los deslizadones
deslizadores.forEach(deslizador => {
//un event listener que llama la función hueLig
  deslizador.addEventListener("input",hueLig)
})


function hueLig(){
        var setAs = hue.value;   
        var Ilumina = lig.value
        chasis.setAttribute("style", `filter:brightness(${Ilumina}) hue-rotate(${setAs}deg)`)
      }
#chasis {
    filter: brightness(1.5) hue-rotate(100deg);
}
<div>
  Matiz
  <input id="hue" type="range" data-default="0" value="100" min="0" max="360" step="1">
</div>

<div>
  Iluminacion
  <input id="lig" type="range" data-default="0" value="1" min="0" max="3" step=".1" id="iluminacion">
</div>

<img id="chasis" src="https://assets.codepen.io/222579/darwin300.jpg" alt="" class="img-responsive" />

-1

Tu problema es que vos le estas indicando con slider que la imagen debe tener como estilo la propiedad filter: hue-rotate(xdeg), y con el siguiente slider le estas indicando que debe tener como estilo filter: brightness(x%), esto lo que hace es sobreescribir la propiedad filter.

Lo que tenes que hacer es obtener primero el valor que tiene la propiedad filter, y luego aplicarle el nuevo valor del filtro mas el que tenia con anterioridad.

En vez de aplicar esto: document.getElementById("chasis").setAttribute("style", "filter:brightness(" + Ilumina + ")")

Deberias aplicar algo asi: document.getElementById("chasis").setAttribute("style", "filter:brightness(" + Ilumina + ") hue-rotate(" + setAs + ")")

Te aconsejo que examines la imagen para que puedas comprender mejor. Cualquier cosa no dudes en preguntar.

5
  • Entiendo lo que dices, pero, honestamente no se como ponerlo en el HTML, ya que son varios slider. Commented el 24 jul. 2021 a las 12:46
  • Es decir, quiero varios slider, si cambio la iluminacion, pueda cambiar por separado el hue. Commented el 24 jul. 2021 a las 12:55
  • Lo que puedes hacer es declarar varias variables donde cada una se encarge de alamacenar un valor de los que puede recibir filter. Ejemplo: let brightness: 100; let contrast: 100; let hueRotate: 0; y asi con todos los valores. Luego declarar una funcion principal que obtenga todos esos datos y los aplique a tu imagen. Y por ultimo te quedaria crear varias funciones donde cada una se va a encargar de actualizar un valor, por ejemplo, el del contraste. Y por ultimo cada una de estas funciones al final debe llamar a tu funcion principal asi se aplican los cambios. Commented el 24 jul. 2021 a las 13:00
  • Soy nuevo en JS, puedes ayudarme con eso? Ya empece a intentarlo a ver si lo logro. Commented el 24 jul. 2021 a las 13:01
  • Si te puedo ayudar, preferis hablar por otro lado? asi es mas comodo Commented el 24 jul. 2021 a las 13:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.