Dynamic image hue using Javascript
CSS does not support altering the hue of an image, which is a pity because it can have interesting uses. You could of course load the image on an HTML5 canvas and alter the hue there, however this will be quite CPU intensive, especially for large images. Here I will discuss how I implemented a background image with variable hue. (Scroll around on this website to see the effect).
Most screens and beamers use a mixture of the additive primary colors red green and blue to generate the full spectrum of colors. We can use the same principle in order to change the hue of an image; pre calculate the 3 color channels of the image, stack these images and mix the required amount intensity from each channel using opacity.
I created the 3 channels using paint-dot net; I changed the image to sepia first in order to get the image in one color and then changed the hue of the image to red green and blue respectively. Then I saved the images as PNG files. As we are on the web and we require small images I compressed the images first using pngquant which is a lossy compression tool (50 percent reduction in my case) and finally Pngcrush which compresses the image losslessly (I had a 4 percent size reduction).
After generating the images we stack these using CSS:
.classForLayers{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
And finaly add an url for all three images;
#channedId{
background-position: 0px 0px;
background: url(./yourimageurl.png) center center fixed;
}
Then the opacity of the different channels can be changed in order to get to hue you like, for example using jquery:
$('#channedId').css({opacity:0.2})
