求一个 js 插件，可以使一个容器呈现出模糊的 body 背景

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3710 天前的主题，其中的信息可能已经有所发展或是发生改变。

使用了blur.js，可是问题是本地测试正常，上传到主机后就提示跨域问题：

unable to access image data unable to access local image data

具体的错误请看： http://tobe.moe/

所以，求教有什么可以代替的方案，或者哪位大神指点一下我这个前段渣该如何解决眼下blur.js的错误。

blur.js

Access

unable

13 条回复 • 2014-10-01 13:59:08 +08:00

WindSays

2014-09-30 21:33:56 +08:00

没人吗？

P233

2014-09-30 21:57:11 +08:00

如果模糊的部分是彻底剧中的用 CSS 就可以了，原则都是 duplicate 背景并且添加模糊效果，缺点是必须固定背景尺寸，不能使用 background-size cover 否则背景无法对齐

http://jsbin.com/xetomaqatexu/1/edit

Webkit 有效， Firefox 需要 svg filter 没写上

shikailun

2014-09-30 21:58:51 +08:00

window.netscape undefined

WindSays

2014-09-30 22:01:07 +08:00

@shikailun 该怎样解决呢?

loading

2014-09-30 22:22:12 +08:00

放一张半透明的模糊 png 当背景不行吗？

loading

2014-09-30 22:44:05 +08:00

应该是：Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
解决：
http://www.tuicool.com/articles/i2Mbmu

sneezry

2014-09-30 23:06:54 +08:00

楼主，变通下怎么样

http://sneezryworks.sinaapp.com/blur/

coraline

2014-09-30 23:41:26 +08:00

https://github.com/LoeiFy/loeify.github.com/blob/master/assets/module/js/canvasBlur.js

e.g. http://lorem.in/about/

WindSays

2014-10-01 08:50:33 +08:00

@coraline 没看明白怎么用啊，怎么定义模糊的容器呢？抱歉，前段渣。

wsph123

2014-10-01 10:29:43 +08:00 via iPhone

最近在外面OAQ没找到网回邮件估计是用画板实现的模糊在新版本Webkit下加载异域的图像需要设置跨域请求头把图片放在同域或者给图片添加跨域返回头OAQ 推荐对图像高斯模糊处理后再设置背景

WindSays

2014-10-01 13:03:22 +08:00

@P233
@shikailun
@loading
@sneezry
@coraline
@wsph123

感谢各位的热心，我现在就用了两张背景图片，一张body原图，一张banner模糊过的图。

为了不同分辨率都能获得背景图的全貌，用PS出了2560 1920 1440 1366 四种大小的背景图各一份。

只能这样了，真希望blur.js的作者能更新解决一下。

WindSays

2014-10-01 13:05:25 +08:00

@wsph123 菊苣你看到我给你的微博私信了？

sneezry

2014-10-01 13:59:08 +08:00

@WindSays 中标喽中标喽，好开森 ^^3