Html5canvas模糊并保存

这是困扰我的。 假设我有一辆汽车的照片。 我想把这张照片放在canvas上，模糊它然后保存模糊的图像。 可能吗？ 如果有另一种模糊和保存方式，图像不一定必须在canvas中。 我尝试过使用blur.js ， pixastic.js和foggy.js ，所有这些都将模糊效果添加到图像中，但它停在那里，我无法保存。 我可以右键单击图像，但没有“ save image as ”链接。 提前谢谢你的回答。

Answer 1

你可以用一个名为stackblur的小脚本来做到这一点：

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

Stackblur.js：

• 采用img元素，
• 模糊和模糊
• 将模糊图像写入canvas。

您可以通过更改模糊半径来控制“模糊”：

 var blurRadius=5; stackBlurImage("blurMe","canvas",blurRadius,false); 

然后，您可以使用canvas.toDataURL获取canvas上模糊图像的数据URL。

这是示例代码：

          
The original img element
 
 
The canvas with blurred image
 
 
An image using the canvas as .src