Adjusting Image Brightness and Color Using the HTML5 Canvas API

filteredEver needed to adjust the brightness of an image? Or maybe you’d like to make an image feel warmer by increasing it’s red channel?

As a followup to my earlier articles, “How You Can Do Cool Image Effects Using HTML5 Canvas” and “How You Can Build an HTML5 Photobooth App“.  In these earlier articles, I provided code for a number of separable color filters: grayscale, sepia, red, brighter, darker.  All of these filters are classified as color filters where the output value for each pixel relies solely on the input state of the same pixel.  It turns out that all of these color filters can all be modeled by a single data driven filter called a Color Matrix Filter which I’ll cover in this article.  This filter takes as input a “color matrix” that contains weights (or coefficients) that determine how the output for a given color component relates to the other color components on input.

The sample application allows you to edit this color matrix as a table and immediately applies the values to the currently loaded image.  The table below shows the values that will yield a sepia style effect:

sepia

Using this as an example the new value for the red component (r’) for each pixel will be calculated given the input values for the pixel of r, g, b, a as follows:


r' = 0.393r + 0.769g + 0.189b + 0

In addition to the coefficients for each color component the value for i is added and can be used to brighten or darken the calculated value.  The new values for g’, b’ and a’ will be calculated in a similar fashion.  The following code block shows the Javascript array that encodes the same sepia color matrix values shown in the table above:


var sepiaMatrix = 
[
0.393, 0.769, 0.189, 0, 0,
0.349, 0.686, 0.168, 0, 0,
0.272, 0.534, 0.131, 0, 0,
    0,     0,     0, 1, 0,
];

The following Javascript array shows a color matrix that will impart a grayscale effect:


var grayscaleMatrix = 
[
0.33, 0.34, 0.33, 0, 0,
0.33, 0.34, 0.33, 0, 0,
0.33, 0.34, 0.33, 0, 0,
   0,    0,    0, 1, 0,
];

The code for the Color Matrix Filter is shown below:


colorMatrixFilter = function (pixels, m) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
    var b = d[i + 2]; 
    var a = d[i + 3];

    d[i]   = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4];
    d[i+1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9];
    d[i+2] = r * m[10]+ g * m[11]+ b * m[12]+ a * m[13]+ m[14];
    d[i+3] = r * m[15]+ g * m[16]+ b * m[17]+ a * m[18]+ m[19]; 
  }
  return pixels;
};

I hope you you’ve enjoyed this article on Color Matrix Filters. The Color Matrix provides a powerful general purpose tool for applying color filters. Sign up for my mailing list, so you don’t miss out on my future articles, tips and tricks.

 

You can try out the sample application here and download the full source here.

 

5 Comments.

  1. Adjusting Image Brightness and Color Using the ... - pingback on October 10, 2013 at 2:34 pm
  2. Isn’t it possible to use a Paint program to do this? I don’t see the point of having to write software when all you need to do is adjust the brightness of an image.

    • This is a programming/software blog…

      Maybe some people would like to know how a “paint program” does it… Isn’t that the point of learning to program :-)…

      Feel free to use a paint program if that solves your problem…

    • Perhaps for example, you have designed a web application to support a client’s process. Currently, the have to scan an ID, extract the info and the photo. Photos sometimes need to be brightened. So what do they do now? They load it into a paint program, adjust it, save it. The time wasted is considerable. Especially when you consider they have to process several hundred in a day. So why wouldn’t I want to give them the ability to tweak the brightness with a slider and move on to the next one before you can even load it into your paint program?