Tilt-Shift photo effect in Canvas

Disclaimer

This effect is more a proof of concept than an attempt to match exactly the optical properties of a real tilt-shift effect. For instance it does not use a depth map and thus can not properly process images showing tall structures. However the results are quite convincing for such a simple piece of code.

Original image

Output image


Back story & production time

During a dinner with some friends from Opera, we discussed bokeh and tilt-shift effects. A few days later one of them mentionned an application producing a tilt-shift on any image. I couldn't help thinking, and saying, that this should be straight forward to implement using Canvas. They took me to the test and one hour later a prototype was ready. An extra hour of polishing was necessary to get the current effect and multiple images.

The technique

A blurred version of the original image is generated using Canvas and drawImage(), then horizontal slices are composited with the original image to produce the final output.

The blurred image is generated incrementally to improve the quality of the blurring effect. Without this, it would feature heavy bilinear interpolation approximations.

Compatibility & browser requirements

A browser supporting CSS2+ and HTML5 ( namely Canvas and ideally WebForms 2 ) is necessary.

Source images

All images are Creative-Common, and their original versions can be found on: