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?

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?

• javascript
• html
• css

• 2 You could probably use the (IE-unsupported) <canvas> tag and load the images into there. – Blender Commented May 27, 2011 at 4:48

4 Answers 4

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 */
}

As Blender suggests, the <canvas> tag is what you want for gamma manipulation, which is a non-linear per-pixel transformation.

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).

Here is one with HTML5.

Checkout the one for brightness adjustment.

https://www.html5rocks./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;
};