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.
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.
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.
- Opera 9.5 gives good results and supports WebForms 2
- FireFox 3 gives goood results but does not support WebForms 2, resulting in a poor UX.
- Safari 3.1.2 supports WebForms 2 but the output is meh
All images are Creative-Common, and their original versions can be found on: