在 Android 上的 Cordova 应用程序中的弹出窗口后面模糊

Posted 2023-05-06

【中文标题】在 Android 上的 Cordova 应用程序中的弹出窗口后面模糊

【英文标题】：blurring behind a popup in Cordova app on Android

【发布时间】：2018-08-19 13:44:35

【问题描述】：

如何在 android Cordova 应用程序中设置一个弹出窗口以使背景模糊？其背后的内容不会提前知道，并且可能包含来自多个来源的图像和其他组件。它不一定只出现在单个图像上。我正在寻找的效果看起来像这样：

到目前为止我调查过的事情：

Background blur with CSS 的答案中描述的方法往往依赖于背景已经作为图像可用（例如，here's a modification of the accepted answer 表明只有背景图像变得模糊，并且任何放置在顶部的文本背景会被效果丢失），或者使用 CSS 属性 backdrop-filter，目前 Android 的 Web 视图组件上没有实现。 使用html2canvas 和类似方法生成图像，然后对图像进行模糊处理。这种方法很有效，但在低端手机的复杂布局上使用起来太慢了，导致弹出窗口出现之前的延迟非常长。

是否有另一种方法可以做到这一点？

【参考方案1】：

如果你使用安卓的crosswalk-plugin，将--enable-experimental-web-platform-features添加到XWALK_COMMANDLINE，然后你可以使用backdrop-filter，但是它仍然有一些错误。您可以在 chrome 中测试此功能，打开 chrome://flags 并打开 enable-experimental-web-platform-features。

【参考方案2】：

您尝试过 svg 过滤器吗？ 也许这可以帮助你https://www.w3schools.com/graphics/svg_fegaussianblur.asp :)

【讨论】：

请将链接中的相关部分添加到您的答案中。

是的。问题中指向this jsfiddle 的链接基于SVG feGaussianBlur。据我所知，你只能用它来模糊背景，但不能用来模糊它上面的任何组件。