Android 在 Cordova 应用程序中的弹出窗口后面模糊
blurring behind a popup in Cordova app on Android
如何在 Android Cordova 应用程序中设置弹出窗口 window 使其背景模糊?其背后的内容无法提前知晓,可能包含来自多个来源的图像和其他组件。它不一定只出现在单个图像上。我正在寻找的效果看起来像这样:
到目前为止我调查过的事情:
- Background blur with CSS, which tend to rely on having the background already available as an image (e.g. here's a modification of the accepted answer 的答案中描述的方法显示只有背景图像变得模糊,并且放置在背景顶部的任何文本都会因效果而丢失),或者使用 CSS 属性
backdrop-filter
当前未在 Android 的网络视图组件上实现。
- 使用html2canvas和类似的方法生成图像然后模糊图像。这种方法可行,但在低端手机的复杂布局上使用速度太慢,导致弹出窗口出现之前的延迟时间长得令人无法接受。
是否有其他方法可以使这项工作成功?
您尝试过 svg 过滤器吗?
也许这可以帮助你 https://www.w3schools.com/graphics/svg_fegaussianblur.asp :)
如果你用crosswalk-plugin代替android,把--enable-experimental-web-platform-features
加到XWALK_COMMANDLINE上,就可以用backdrop-filter
了,但还是有bug。您可以在 chrome 中测试此功能,打开 chrome://flags
并打开 enable-experimental-web-platform-features
.
如何在 Android Cordova 应用程序中设置弹出窗口 window 使其背景模糊?其背后的内容无法提前知晓,可能包含来自多个来源的图像和其他组件。它不一定只出现在单个图像上。我正在寻找的效果看起来像这样:
到目前为止我调查过的事情:
- Background blur with CSS, which tend to rely on having the background already available as an image (e.g. here's a modification of the accepted answer 的答案中描述的方法显示只有背景图像变得模糊,并且放置在背景顶部的任何文本都会因效果而丢失),或者使用 CSS 属性
backdrop-filter
当前未在 Android 的网络视图组件上实现。 - 使用html2canvas和类似的方法生成图像然后模糊图像。这种方法可行,但在低端手机的复杂布局上使用速度太慢,导致弹出窗口出现之前的延迟时间长得令人无法接受。
是否有其他方法可以使这项工作成功?
您尝试过 svg 过滤器吗? 也许这可以帮助你 https://www.w3schools.com/graphics/svg_fegaussianblur.asp :)
如果你用crosswalk-plugin代替android,把--enable-experimental-web-platform-features
加到XWALK_COMMANDLINE上,就可以用backdrop-filter
了,但还是有bug。您可以在 chrome 中测试此功能,打开 chrome://flags
并打开 enable-experimental-web-platform-features
.