In my project, I'm trying to create an ambient lighting feel. I handle images via client side coding and I need to adjust brightness of several images. I know there are libraries such as Pixastic, but I want a solution which applies directly into HTML code(like tags) rather than Image objects in JS. Are there any Javascript or CSS based way to do it?
4 Answers
You can try playing around with CSS opacity to see if that suits your needs.
img {
opacity: 0.8; /* good browsers */
filter: alpha(opacity=80); /* ye 'old IE */
}
3 Comments
ninjagecko
though I doubt it would look good, one can put a white background behind the image, so as it becomes transparent, it just appears to get whiter and whiter ("brighter")
Hgeg
Using opacity was the first thing I thought. I tried to put a shadow layer on top of the image but it darkens the whole block. I just want to darken the image only.
dtbarne
Then put a black layer behind the image.
As Blender suggests, the <canvas> tag is what you want for gamma manipulation, which is a non-linear per-pixel transformation.
Comments
First of all, if Pixastic can work on the results of new Image it can work on <img> elements in the document too.
Your options other than that are basically canvas imagedata manipulation (which won't work in IE8 or older) and SVG filters (which won't work in IE8 or older, and won't work on HTML elements directly in anything but Gecko).
Comments
Here is one with HTML5.
Checkout the one for brightness adjustment.
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;
};
2 Comments
Sreekumar P
it was a old post, please use this site to do and test html5 html5canvastutorials.com
Wallace Vizerra
dead link -1 :|
<canvas>tag and load the images into there.