V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
WindSays
V2EX  ›  问与答

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

  •  
  •   WindSays · 2014-09-30 21:23:17 +08:00 · 3953 次点击
    这是一个创建于 3706 天前的主题,其中的信息可能已经有所发展或是发生改变。
    使用了blur.js,可是问题是本地测试正常,上传到主机后就提示跨域问题:

    unable to access image data unable to access local image data

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

    所以,求教有什么可以代替的方案,或者哪位大神指点一下我这个前段渣该如何解决眼下blur.js的错误。
    13 条回复    2014-10-01 13:59:08 +08:00
    WindSays
        1
    WindSays  
    OP
       2014-09-30 21:33:56 +08:00
    没人吗?
    P233
        2
    P233  
       2014-09-30 21:57:11 +08:00   ❤️ 1
    如果模糊的部分是彻底剧中的用 CSS 就可以了,原则都是 duplicate 背景并且添加模糊效果,缺点是必须固定背景尺寸,不能使用 background-size cover 否则背景无法对齐

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

    Webkit 有效, Firefox 需要 svg filter 没写上
    shikailun
        3
    shikailun  
       2014-09-30 21:58:51 +08:00   ❤️ 1
    window.netscape undefined
    WindSays
        4
    WindSays  
    OP
       2014-09-30 22:01:07 +08:00
    @shikailun 该怎样解决呢?
    loading
        5
    loading  
       2014-09-30 22:22:12 +08:00   ❤️ 1
    放一张半透明的模糊 png 当背景不行吗?
    loading
        6
    loading  
       2014-09-30 22:44:05 +08:00   ❤️ 1
    应该是:Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
    解决:
    http://www.tuicool.com/articles/i2Mbmu
    sneezry
        7
    sneezry  
       2014-09-30 23:06:54 +08:00   ❤️ 1
    楼主,变通下怎么样

    http://sneezryworks.sinaapp.com/blur/
    WindSays
        9
    WindSays  
    OP
       2014-10-01 08:50:33 +08:00
    @coraline 没看明白怎么用啊,怎么定义模糊的容器呢?抱歉,前段渣。
    wsph123
        10
    wsph123  
       2014-10-01 10:29:43 +08:00 via iPhone
    最近在外面OAQ没找到网回邮件 估计是用画板实现的模糊 在新版本Webkit下 加载异域的图像需要设置跨域请求头 把图片放在同域 或者给图片添加跨域返回头OAQ 推荐对图像高斯模糊处理后再设置背景
    WindSays
        11
    WindSays  
    OP
       2014-10-01 13:03:22 +08:00
    @P233
    @shikailun
    @loading
    @sneezry
    @coraline
    @wsph123

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

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

    只能这样了,真希望blur.js的作者能更新解决一下。
    WindSays
        12
    WindSays  
    OP
       2014-10-01 13:05:25 +08:00
    @wsph123 菊苣你看到我给你的微博私信了?
    sneezry
        13
    sneezry  
       2014-10-01 13:59:08 +08:00   ❤️ 1
    @WindSays 中标喽中标喽,好开森 ^^3
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2786 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 08:34 · PVG 16:34 · LAX 00:34 · JFK 03:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.