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

Question

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

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

• Background blur with CSS 的答案中描述的方法，它往往依赖于背景已经作为图像可用(例如 here's a modification of the accepted answer 显示只有背景图像变得模糊，并且放置在背景顶部的任何文本都丢失了通过效果)，或使用 CSS 属性 backdrop-filter，它目前未在 Android 的 WebView 组件上实现。
• 使用 html2canvas 和类似方法生成图像，然后对图像进行模糊处理。这种方法可行，但在低端手机的复杂布局中使用速度太慢，导致弹出窗口出现之前的延迟时间长得令人无法接受。

还有其他方法可以使这项工作成功吗？

Answer 1

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