I'm trying to convert something written in AS3 to JavaScript and the AS3 application uses Flash's built in Blur Filter
Does anyone know what blurring algorithm this used or how to replicate it in JavaScript?
Thanks
I'm trying to convert something written in AS3 to JavaScript and the AS3 application uses Flash's built in Blur Filter
Does anyone know what blurring algorithm this used or how to replicate it in JavaScript?
Thanks
It is a Gaussian style blur like they say in their documentation:
When the quality property is set to high, it approximates a Gaussian blur filter
It is highly optimized version of a style of Gaussian filter/Weierstrass transform, especially when using power of 2 x/y offsets, as you can apply it in real-time to video, so you are not going to get the exact result in a non-Flash app, but you can get really close and no one is going to know the difference.
There are many ways to do a Gaussian blur in html/css/javascript. There are methods via fancy drop-shadowing techniques in CSS, using an HTML5 Canvas and applying custom filters, javascript processing of bitmap via byte arrays, etc... some with cross-browser based limitations, some with CPU processing issues, etc.. google/bing is your friend for searching for different techniques people have already developed and the pros and cons they have encountered.
I grabbed the following one for a quick HTML5 project:
Mario Klingemann has created a fast implementation of an “almost gaussian blur algorithm” in JavaScript.
http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html http://badassjs.com/post/1298940200/stackblur
Here are the images that I use to compare it for myself and it was 'close enough' to Flash's BlurFilter that I used it. (StackBlur produces a slightly darker image, assuming he is skipping some normalizing that would cause the routine to be slower)
My Air version; quality set to HIGH and x/y filter offset set to 10: