HTML5 - 使用stackblur的图像模糊

时间:2013-10-27 12:29:09

标签: html5 image blur

我正在尝试使用stackBlur(http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html)来使用stackBlurImage( 'srcimg', 'canvas', 10, false );模糊整个图像。但它既不适用于本地系统,也不适用于互联网。有人可以建议我这样做的正确方法吗?

这是我的jsFiddle - http://jsfiddle.net/yesprasoon/3KxrW/

或者,请让我知道任何其他模糊图像的方法。 CSS转换在Phonegap for Android webkit中无效。

更新

由于某些'因为画布受到跨原始数据的污染'错误,图像没有变得模糊。我在Chrome中将其作为本地文件进行测试。使用chrome运行正常的脚本:localhost / IE9 / FF。

1 个答案:

答案 0 :(得分:1)

原因是您不能访问和修改图像(使用画布),除非它与您的网页托管在同一服务器上。

有关详细信息,请参阅 here

如果图片与网页一起托管,那么使用您提供的代码(例如stackBlurImage("srcimg", "canvas", 5, false);)就没有问题。

另请参阅此 short demo