模糊显示效果 - html5画布答案

【问题标题】：Blur show effect - html5 canvas模糊显示效果 - html5画布
【发布时间】：2011-06-23 19:36:19
【问题描述】：

我想创建一个模糊显示效果，例如：http://www.flasheff.com/patternsshowcase/ (FESBlur)。

我尝试使用 http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html 使用 setInterval 并更改每个“帧”上效果的半径，但如果我将间隔延迟设置为较低的值（提高效果的速度），它不会运行平滑（我认为这是因为它使用了 imageData，并改变了每个像素的值）。

您对如何使该效果运行得足够快有任何想法吗？（从最大模糊到非模糊大约需要 1 秒）

谢谢，加布里埃尔

【问题讨论】：

您的版本在某处可用吗？
不，我现在没有，但我可以稍后添加它。
dl.dropbox.com/u/21369474/Blur.zip 这是我的资料来源。我有 10 毫秒的间隔，运行 50 次。通常需要 500 毫秒，但需要更长的时间。

标签： html canvas blur effect

【解决方案1】：

我不是这方面的专家，但我想到了一些非常明显的事情：

方法 1：缓冲。 缓冲可能是阻止口吃的最有效方法。如果您可以在实际输出动画之前将动画的启动延迟 0.25 秒，您可能会在动画开始之前完成一半的计算。

方法 2：缓存。 处理模糊所需的时间通常会随着模糊半径的增加而增加。假设您的动画中有 20 帧。如果可以缓存第 5、10、15 和 20 帧（未模糊图像），那么您可以从小半径的模糊 5 中获取第 1-4 帧，并且您将免费获得第 5 帧，然后您可以获得第 6-帧9 从以小半径模糊 10，您将免费获得第 10 帧，依此类推。

方法 3：粗略模糊的插值/混合。 混合两张图像应该比模糊一张图像更快。如果您将动画制作为 21 帧 (1-21)，那么您应该能够计算第 1、5、9、13、17 和 21 帧。这些帧将是免费的，您可以通过混合它们来获得其他帧: 帧 2 (F2) 将是 75% F1 和 25% F5，F3 将是 50% F1 和 50% F5，依此类推。

我的猜测是，这需要您进行大量的修补。这些都不能通过简单地将一两个参数更改为一些幻数来解决您的问题。

但是，请意识到这一点：javascript 并不能真正选择何时会或不会引起处理器的注意，而且它在处理器的优先级列表中并不完全处于高位。如果处理器决定休假 1/10 秒，那么您可能无能为力来阻止口吃。

【讨论】：

我在上面的评论中添加了我的来源的链接

【解决方案2】：

使用 requestAnimFrame 代替 setInterval。更多信息http://paulirish.com/2011/requestanimationframe-for-smart-animating/

我在我的 FF5 上用更快的模糊减少测试了这个，它似乎表现不错。

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

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

【讨论】：