1

Intento hacer una web en la que subo una imagen para procesarla con un filtro svg, el cual disminuye las sombras en imágenes oscuras.

lo que quiero es modificar los valores del filtro usando javascript, y usar un <input type=range> para variar dichos valores.

Aquí subo un ejemplo del filtro explicando que valores son los que quiero que se puedan modificar con javascript.

<svg>
<defs>
<!--filtro modificador de luz quiero modificar amplitude exponent y offset de los canales RGB juntos osea que los 3 canales tengan la misma amplitud el mismo exponent y el mismo offset-->
            
            <filter id="filtroLuz" color-interpolation-filters="sRGB">
                <feComponentTransfer in="blur" result="component">
                    <feFuncR  amplitude="1" exponent="0.4" offset="0" type="gamma"/>
                    <feFuncG  amplitude="1" exponent="0.4" offset="0" type="gamma"/>
                    <feFuncB  amplitude="1" exponent="0.4" offset="0" type="gamma"/>
                </feComponentTransfer>
            </filter>
</defs>
</svg>
<!--imagen con filtro que reduce sombras-->

<svg class="joystick" width="40%" height="40%" viewBox="0 0 1 1">
                    <foreignObject filter="url(#filtroLuz)" x="0" y="0" width="100%" height="100%"   style="background-repeat: no-repeat; background-size:100% 100%;background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQMcs2NKxDfgdI_cTg1bldlU2uEGh9Tw1TtDg&usqp=CAU')"/>
                    
</svg>
<!--imagen sin filtro-->
<svg class="joystick" width="40%" height="40%" viewBox="0 0 1 1">   
                     <foreignObject x="0" y="0" width="100%" height="100%"   style="background-repeat: no-repeat; background-size:100% 100%;background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQMcs2NKxDfgdI_cTg1bldlU2uEGh9Tw1TtDg&usqp=CAU')"/>
</svg>

` para variar su valor.

El filtro sería el siguiente lo uso con diferentes valores para que entendáis lo que hay que modificar.

1 respuesta 1

2

En el siguiente ejemplo estoy utilizando 3 deslizadores para modificar el valor del attributo offest. Cada elemento input tiene un atributo data-fe que indica el filtro que modifica.

Los tres deslizadores aparecen anidados en un div id="offset"

Al mover cualquier deslizador (el evento "input") primero identifico el filtro que modifica: let filter = document.querySelector(e.target.dataset.fe); La siguiente línea de código modifica el attributo offset del filtro seleccionado.

Puedes aplicar la misma técnica para los demás atributos que quieres modificar

offset.addEventListener("input", (e) => {
  let filter = document.querySelector(e.target.dataset.fe);
  filter.setAttribute("offset", e.target.value);
});
<div id="offset">
OFFSET:<br>
R: <input data-fe="feFuncR" type="range" min="-1"  max="1" value="0" step=".01" />
G: <input  data-fe="feFuncG" type="range" min="-1"  max="1" value="0" step=".01" />
B: <input  data-fe="feFuncR" type="range" min="-1"  max="1" value="0" step=".01" />
</div>

<br>

<svg id="defs" style="position:absolute;width:0;height:0">
<defs>
<!--filtro modificador de luz quiero modificar amplitude exponent y offset de los canales RGB juntos osea que los 3 canales tengan la misma amplitud el mismo exponent y el mismo offset-->
            
            <filter id="filtroLuz" color-interpolation-filters="sRGB">
                <feComponentTransfer in="blur" result="component">
                    <feFuncR  amplitude="1" exponent="0.4" offset="0" type="gamma"/>
                    <feFuncG  amplitude="1" exponent="0.4" offset="0" type="gamma"/>
                    <feFuncB  amplitude="1" exponent="0.4" offset="0" type="gamma"/>
                </feComponentTransfer>
            </filter>
</defs>
</svg>
<!--imagen con filtro que reduce sombras-->

<svg class="joystick" width="40%" height="40%" viewBox="0 0 1 1">
                    <foreignObject filter="url(#filtroLuz)" x="0" y="0" width="100%" height="100%"   style="background-repeat: no-repeat; background-size:100% 100%;background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQMcs2NKxDfgdI_cTg1bldlU2uEGh9Tw1TtDg&usqp=CAU')"/>
                    
</svg>
<!--imagen sin filtro-->
<svg class="joystick" width="40%" height="40%" viewBox="0 0 1 1">   
                     <foreignObject x="0" y="0" width="100%" height="100%"   style="background-repeat: no-repeat; background-size:100% 100%;background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQMcs2NKxDfgdI_cTg1bldlU2uEGh9Tw1TtDg&usqp=CAU')"/>
</svg>

2
  • esta bien, pero lo que quería era modificar el R G B con un solo imput, para poder quitar las sombras de la foto. En tu ejemplo, cuando modifico el R y después modifico el G, se va el efecto del filtro R y solo se queda con el G. Commented el 4 oct. 2020 a las 7:43
  • En este caso necesitas 1. establecer el valor base de cada feFunc al qual quieres volver. 2. Añadir un evento click a los elementos imput: al hacer click en cualquier elemento input reestablecer la amplitud, el exponent y el offset de cada feFunc al valor de base.
    – enxaneta
    Commented el 9 oct. 2020 a las 9:12

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.