实时更新磨砂玻璃UI jQuery

Question

我需要一个磨砂玻璃UI效果，它基本上是一个透明的白色div覆盖一些内容。 div下方内容的一部分应该模糊不清。效果看起来像这样： http://codepen.io/Matori/pen/JFzok

random code because StackOverflow forced me to add it

问题是，我没有使用任何背景图片。我的应用程序是一个绘图工具，用户可以在其中绘制形状和文本。因此，覆盖着磨砂玻璃div的区域将每秒更新一次。

我已经尝试this html5 Canvas plugin，但我无法让它发挥作用。无论如何，这还够吗？或者只是在页面加载时拍摄我的body元素的快照？

Answer 1

这是实现效果的一种方法。

• 快速模糊（Mario Klingemann）到你的形象，

• 覆盖＆＃34;霜＆＃34;由白色矩形制成，不透明度为25％。

模糊脚本在这里：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

示例代码和演示：http://jsfiddle.net/m1erickson/PA9NC/

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = start;
    img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/Dog-With-Cute-Cat.jpg";

    function start() {
        canvas.width = img.width;
        canvas.height = img.height;

        // draw the image

        ctx.drawImage(img, 0, 0);

        // blur the image with blur radius=10

        stackBlurCanvasRGB("canvas", 0, img.height/2+30, img.width, img.height / 2, 10);

        // draw a white rectangle at 25% opacity

        ctx.globalAlpha = 0.25;
        ctx.fillStyle = "white";
        ctx.fillRect(0, img.height/2+30, img.width, img.height / 2);

        // draw some text at 40% opacity

        ctx.globalAlpha = 0.40;
        ctx.font = "102px arial";
        ctx.fillText("Us", 225, 275);
    }