Image Transition Effects with Canvas

There are a number of JavaScript libraries out there that allow you to manipulate images with various filters and effects and a recent one that I have been playing around with is called Pixastic. In simple terms, Pixastic turns an image into html5 CANVAS and then it does pixel manipulation. It has good documentation and even a nice photo editor. But, I don’t want to just change an image by applying a filter, I would like to show the whole transition. For example, instead of turning an image from color to black and white, I want to show an animation of the image slowly transitioning from color to black and white. Here’s how it can be done with Pixastic.

There a couple ways to do this and I wanted to make it pretty simple so I pulled and inlined the Pixastic core JavaScript code and one filter, the Hue/Saturation/Lightness. To make things easier, I have also included jQuery and a sample image from the Pixastic demo. My code includes 3 functions, the first one is responsible for making the actual transition effect. It uses setInterval to redraw the canvas image with different hue properties at an interval of 30ms. Another variable, i, controls the hue jump interval which can be used for controlling how quickly should the hue change. Inside, I include an if statement that clears the setInterval function once i reaches a certain number. This is most of the work.

I added a click event handler in the next function to the image in order to transform it to a CANVAS object and initiate the transition when you click on the image. The last function adds a live click event handler to the CANVAS so that you can keep clicking on the image and restarting the transition effect. It has to be live because the CANVAS object is not in the DOM when the page is loaded, it gets added when you initially press on the Image object. Check out the demo and look at the source to see the code.