Dans mon projet, j'essaie de créer une sensation d'éclairage ambiant. Je gère les images via le codage côté client et j'ai besoin d'ajuster la luminosité de plusieurs images. Je sais qu'il existe des bibliothèques comme Pixastic, mais je veux une solution qui s'applique directement au code HTML (comme les balises) plutôt qu'aux objets Image dans JS. Existe-t-il un moyen basé sur Javascript ou CSS pour le faire?Luminosité de l'image avec html5/CSS/JS
Comme Blender indique, la balise est <canvas> ce que vous voulez pour la manipulation gamma, qui est une transformation non linéaire par pixel.
Vous pouvez essayer de jouer avec l'opacité CSS pour voir si cela convient à vos besoins.
img {
opacity: 0.8; /* good browsers */
filter: alpha(opacity=80); /* ye 'old IE */
}
bien que je doute que cela semble bien, on peut mettre un fond blanc derrière l'image, de sorte qu'il devient transparent, il semble juste plus blanc et plus blanc ("plus lumineux") – ninjagecko
L'utilisation de l'opacité était la première chose que je pensais. J'ai essayé de mettre une couche d'ombre sur le dessus de l'image mais cela assombrit tout le bloc. Je veux juste assombrir l'image seulement. – Hgeg
Ensuite, mettez un calque noir derrière l'image. – dtbarne
En voici une avec HTML5.
Contrôlez celui pour le réglage de la luminosité.
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;
};
lien mort ....... –
c'était un ancien poste, s'il vous plaît utiliser ce site pour faire et tester html5 http://www.html5canvastutorials.com/ – Sreekumar
lien mort -1: | –
Tout d'abord, si Pixastic peut travailler sur les résultats de new Image il peut travailler sur <img> éléments dans le document aussi. Vos autres options sont essentiellement la manipulation de canvas imagedata (qui ne fonctionnera pas dans IE8 ou plus) et les filtres SVG (qui ne fonctionneront pas dans IE8 ou plus anciens, et ne fonctionneront pas sur des éléments HTML directement dans n'importe quoi). mais Gecko).
Vous pouvez probablement utiliser la balise ''