CODEWITHSUNDEEP
javascripthtmlcss
Hgeg
Hgeg

Reputation: 545

Image brightness with html5/CSS/JS

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?

Upvotes: 6

Views: 9471

Answers (4)

Sreekumar P
Sreekumar P

Reputation: 6050

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;
};

Upvotes: 1

Boris Zbarsky
Boris Zbarsky

Reputation: 35074

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

Upvotes: 1

ninjagecko
ninjagecko

Reputation: 91092

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

Upvotes: 1

dtbarne
dtbarne

Reputation: 8200

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

Upvotes: 8

Related Questions