Blur show effect - html5 canvas

问题

I want to create a blur show effect like : http://www.flasheff.com/patternsshowcase/ (FESBlur).

I've tried to use http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html using setInterval and changing the radius of the effect on each "frame", but if I set the interval delay to a lower value(increase the effect's speed), it doesn't runs smooth ( I think it's beacuse it uses imageData, and changes the value of every pixel).

Do you have any ideea about how I could make that effect to run fast enough? (about 1 second from max blur to non-blur)

Thanks, Gabriel

回答1:

I'm no expert at any of this, but some very obvious things come to mind:

Method 1: Buffering. Buffering is probably the single most effective way to stop stutters. If you could delay the initiation of the animation by .25 seconds before actually outputting it, you could probably get half of the calculations done before the animation even starts.

Method 2: Caching. The time that a blur takes to process usually grows as the radius of the blur grows. Let's say you have 20 frames in your animation. If you can cache frame 5, 10, 15, and 20 (unblurred image) then you can get frames 1-4 from blurring 5 with a small radius, and you'll get frame 5 for free, then you can get frames 6-9 from blurring 10 with a small radius, and you'll get frame 10 for free, and so on.

Method 3: Interpolation/Blending of Coarse Blurs. Blending two images should be quicker than blurring one image. If you make your animation 21 frames (1-21), then you should be able to calculate frames 1, 5, 9, 13, 17, and 21. Those frames would be free, and you'd the other frames by blending them: frame 2 (F2) would be 75% F1 and 25% F5, F3 would be 50% F1 and 50% F5, and so on.

My guess is that this would take a decent amount of tinkering on your part. None of these are going to fix your problem by simply changing a parameter or two to some magic numbers.

Realize this, however: javascript doesn't really get to pick and choose when it will or will not get the attention of the processor, and it's not exactly high on the processor's list of priorities. If the processor decides to go on vacation for 1/10th of a second, there's probably nothing that you can do to stop the stutter.

回答2:

Use requestAnimFrame instead of setInterval. More info on http://paulirish.com/2011/requestanimationframe-for-smart-animating/

I tested this with faster blur reduction on my FF5 and it seems to perform fine.

(function animloop(){
  blurImage();
  requestAnimFrame(animloop);
})();

function blurImage(){
    stackBlurImage( "image1", "output", amount, true );
    amount=amount-4;
}

来源：https://stackoverflow.com/questions/6451187/blur-show-effect-html5-canvas

标签

html5

canvas

blur

effect