javascript - 实时更新磨砂玻璃 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但我无法让它工作。无论如何，这就足够了吗？或者它只是在页面加载时拍摄我的正文元素的快照？

Answer 1

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

• 对您的图像应用快速模糊(由 Mario Klingemann 设计)，

• 覆盖由 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);
    }