使用Chart.js的WebView转Bitmap时部分设备图表空白问题咨询

根因定位 #

• Chart.js默认通过HTML5 Canvas元素渲染图表，WebView开启硬件加速时，Canvas的绘制内容会存储在独立的硬件渲染层，常规view.draw(canvas)调用无法捕获该层内容。不同设备搭载的WebView内核版本对硬件层内容的暴露逻辑存在差异，因此出现部分设备正常、部分设备图表空白的现象。
• 现有代码的WebView测量逻辑未配套触发布局更新，可能导致Chart.js的Canvas未完成实际渲染就提前生成Bitmap。

解决步骤 #

1. 验证硬件加速影响 #

生成Bitmap前临时关闭WebView硬件加速，生成完成后恢复，排查是否为硬件渲染层捕获问题：

// 生成Bitmap前调用
binding.wvContent.setLayerType(View.LAYER_TYPE_SOFTWARE, null)
// 执行现有Bitmap生成逻辑
val contentBitmap = getBitmapFromView(binding.wvContent)
// 生成完成后恢复硬件加速，避免影响后续WebView交互
binding.wvContent.setLayerType(View.LAYER_TYPE_HARDWARE, null)

关闭硬件加速后Bitmap生成速度会变慢，属于正常现象。

2. 调整Bitmap生成时机 #

JS渲染为异步逻辑，Chart.js图表绘制通常晚于WebView的onPageFinished回调，需等图表渲染完成后再生成Bitmap：

• 优先方案：给WebView注入JS回调接口，前端Chart.js渲染完成后主动通知原生层执行Bitmap生成逻辑
• 兜底方案：在onPageFinished回调后增加100~300ms延迟再执行Bitmap生成逻辑

3. 修正测量与布局逻辑 #

现有测量逻辑未触发WebView重新布局，会导致绘制内容和实际尺寸不匹配，调整为如下实现：

binding.wvContent.measure(
    View.MeasureSpec.makeMeasureSpec(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED),
    View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
)
// 主动触发布局，确保WebView按照测量尺寸完成渲染
binding.wvContent.layout(0, 0, binding.wvContent.measuredWidth, binding.wvContent.measuredHeight)
val contentBitmap = getBitmapFromView(binding.wvContent)

4. 兼容兜底方案 #

如果上述方案仍无法覆盖所有设备，可修改前端Chart.js初始化配置，强制使用SVG模式替代Canvas模式渲染，SVG属于普通DOM元素，不受硬件层捕获逻辑影响：

new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    renderer: 'svg'
  }
})

内容的提问来源于stack exchange，提问作者Maurici Guell Hernandez