0

I want to blur an image with box blur animation, initially want square with a huge radius which would gradually decrease in size and finally form a background image.

I tried http://www.quasimondo.com/BoxBlurForCanvas/FastBlur2Demo.html but it does it in circular fashion while I require box-shaped blur.

I also tried http://desandro.com/resources/close-pixelate/ but it's horribly slow as the image I am using is 1280px x 800px and is used as page background.

Any help on how this can be achieved?

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Tarun
  • 5,374
  • 4
  • 22
  • 32
  • Have a look at this question / answer http://stackoverflow.com/questions/2471226/dynamically-pixelate-an-html-image-element – Manse Dec 07 '11 at 11:55

1 Answers1

0

When you pixelate an image, you are effectively reducing resolution (i.e. making the pixels larger). Depending on your application, you may be able to simply reduce the image resolution and then stretch the image across the same area.

Starting with the blur filter does yield much better results. Without it, the downsampled image exhibits all sorts of aliasing effects. Keep in mind, your downsampling algorithm may smooth as it scales.

The main trick is to make sure that when the image is stretched, it is not smoothed.

Chris
  • 694
  • 3
  • 18