首页 > 解决方案 > 带有 layer_type_software 的 Android WebView 不显示 HTML5 画布内容

问题描述

自上次更新 Android WebView 以来,当通过将 WebView 的图层类型设置为 View.LAYER_TYPE_SOFTWARE 禁用硬件加速时,无法正确显示带有 HTML5 画布的网页。有解决此问题的方法吗?

当我省略以下 Java 代码行时: webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); 然后内容正确显示。

Java代码:

WebView webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
webView.loadUrl("file:///android_asset/Gradient.html");

html文件test.html:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

预期结果:黑色边框中的红色线性渐变 https://heiri-web.ch/Gradient.png

实际结果:空黑色边框 https://heiri-web.ch/Empty.png

标签: androidandroid-webview

解决方案


在向 Google 提交错误报告https://issuetracker.google.com/issues/139276381后,我收到了该错误不会被修复的回复,因为LAYER_TYPE_SOFTWARE它已过时。因为我需要LAYER_TYPE_SOFTWARE 来获得完整的屏幕截图(包括 HTML5 画布内容),WebView.getDrawingCache()所以我要求另一种方法。

在 WebView 开发团队成员 Bo Liu 的建议下,我设法在不使用的情况下获得了 WebView 的完整屏幕截图LAYER_TYPE_SOFTWARE:创建 ImageReader,用于ImageReader.getSurface()获取 Surface,在 Surface 上创建 VirtualDisplay,VirtualDisplay.getDisplay()用于获取 Display,在 Display 上的布局中创建一个带有 WebView 的 Presentation,使用Presentation.show(), 用于ImageReader.acquireLatestImage()读取 WebView 内容的渲染图像。


推荐阅读