在渲染到画布上之前模糊图像

Question

我正在尝试为我在画布上移动的图像实现高斯模糊。有没有办法在将图像渲染到画布之前模糊图像？

此图像不会保持静止，我将不得不渲染同一图像的多个尺寸，因此我无法模糊源图像。

有什么想法吗？

Answer 1

您可以轻松获得所需尺寸的预渲染模糊图像！

• 创建一个屏幕外画布：document.createElement('canvas');

• 将所需的多种尺寸的图像绘制到屏幕外的画布上：drawImage with sizing parameters

• 使用模糊程序模糊整个屏幕外的画布：

  http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

• 像精灵表一样使用屏幕外的画布，然后剪切＆＃39;您需要的任何尺寸图像，并将剪切图像绘制到屏幕画布上：再次使用drawImage with sizing parameters