实时更新磨砂玻璃 UI jQuery答案

【问题标题】：Live Updating Frosted Glass UI jQuery实时更新磨砂玻璃 UI jQuery
【发布时间】：2023-03-18 22:40:02
【问题描述】：

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

random code because StackOverflow forced me to add it

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

我尝试过this html5 Canvas plugin，但无法正常工作。无论如何，够了吗？或者它只是在页面加载时拍摄我的 body 元素的快照？

【问题讨论】：

标签： javascript jquery html html5-canvas

【解决方案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);
    }

【讨论】：

我在我的问题中提到我没有任何图像。我的网络应用程序中没有任何图像。我需要使用每秒实时更新的网站内容（div、文本、输入按钮等）来完成这项工作。例如，想象一下 Facebook 想要给他们的蓝色标题栏一个磨砂玻璃效果。因此，当标题滚动页面内容（实时更新）时，可以看到栏下方的内容模糊。他们会怎么做？
哎哟！您说“我的应用程序是一个绘图工具，用户可以在其中绘制形状和文本......覆盖有毛玻璃”并且您包含“画布”标签，所以我假设您可以控制下面的内容。如果没有，您可能不得不降级以在您的内容上覆盖一个固定的半透明白色图像。如果不控制内容，就无法做模糊效果。
固定的透明图像与透明的白色背景颜色没有什么不同，对吧？我认为有可能每秒拍摄文档的快照，然后将其用作图像或其他东西？
是的，如果没有对内容的模糊效果，“霜”的半透明覆盖就不会那么令人满意。也许给霜添加一些“噪音”？控制内容很重要，这样您就可以访问内容的像素。模糊效果是通过更改像素来创建的，因此如果不访问像素，就无法实现模糊效果。目前，除非您满足跨域安全要求，否则无法获得可靠的网页快照。除非您控制内容，否则无法满足这种安全性。
Here 与移动背景图像效果相同。