html - 在渲染到 Canvas 上之前模糊图像

Question

我正在尝试为我在 Canvas 上移动的图像实现高斯模糊。有没有办法在将图像渲染到 Canvas 上之前对其进行模糊处理？

这张图片不会保持静态，我将不得不渲染同一张图片的多种尺寸，所以我不能只模糊源图片。

有什么想法吗？

Answer 1

您可以很容易地获得所需尺寸的预渲染模糊图像!

• 创建离屏 Canvas :document.createElement('canvas');

• 以所需的多种尺寸将图像绘制到离屏 Canvas 上:drawImage with sizing parameters

• 使用模糊程序模糊整个屏幕外的 Canvas :

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

• 像 spritesheet 一样使用屏幕外 Canvas ，“剪切”您需要的任何大小的图像，然后将剪切图像绘制到屏幕 Canvas 上:再次使用 drawImage with sizing parameters

  /li>