En mi proyecto, intento crear una sensación ambiental de iluminación. Manejo las imágenes a través de la codificación del lado del cliente y necesito ajustar el brillo de varias imágenes. Sé que hay bibliotecas como Pixastic, pero quiero una solución que se aplique directamente en el código HTML (como etiquetas) en lugar de objetos de imagen en JS. ¿Hay alguna forma basada en Javascript o CSS para hacerlo?Brillo de la imagen con html5/CSS/JS
Como sugiere Blender, la etiqueta <canvas> es lo que quiere para la manipulación gamma, que es una transformación no lineal por píxel.
Puede intentar jugar con la opacidad de CSS para ver si se ajusta a sus necesidades.
img {
opacity: 0.8; /* good browsers */
filter: alpha(opacity=80); /* ye 'old IE */
}
Aunque dudo que se vea bien, se puede poner un fondo blanco detrás de la imagen, de modo que se vuelve transparente, parece que se vuelve más blanca y más blanca ("más brillante") – ninjagecko
Usar opacidad fue lo primero que pensé. Traté de poner una capa de sombra en la parte superior de la imagen, pero oscurece todo el bloque. Solo quiero oscurecer la imagen solo. – Hgeg
Luego coloque una capa negra detrás de la imagen. – dtbarne
Aquí hay uno con HTML5.
Verifique el ajuste de brillo.
https://www.html5rocks.com/en/tutorials/canvas/imagefilters/
Filters.brightness = function(pixels, adjustment) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
d[i] += adjustment;
d[i+1] += adjustment;
d[i+2] += adjustment;
}
return pixels;
};
vínculo muerto ....... –
era una publicación anterior, utilice este sitio para hacer y probar html5 http://www.html5canvastutorials.com/ – Sreekumar
enlace muerto -1: | –
En primer lugar, si Pixastic puede trabajar en los resultados de new Image se puede trabajar en <img> elementos en el documento también.
Sus opciones, aparte de eso, son básicamente manipulación de imágenes de lienzo (que no funcionará en IE8 o anterior) y filtros SVG (que no funcionarán en IE8 o anterior, y no funcionarán en elementos HTML directamente en nada pero Gecko).
Probablemente pueda usar la etiqueta (