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.