Flutter Web特定场景下PictureRecorder生成的Image无法渲染问题

问题背景 #

在x86_64架构的Ubuntu开发机上，使用以下命令构建运行Flutter Web应用时，Chrome和Firefox均能正常渲染通过PictureRecorder生成的dart:ui Image：

flutter channel stable
flutter upgrade
flutter config --enable-web
flutter run --web-renderer canvaskit --release

但在aarch64架构的Raspberry Pi 4上，用相同命令构建发布版并部署到K8s集群后，Firefox可正常渲染，Chrome完全无法显示该生成的Image。应用为纯客户端，无服务端依赖，Flutter版本为stable 3.3.8。

相关核心代码：

const src = Rect.fromLTWH(60, 0, 30, 30);
const dst0 = Rect.fromLTWH(0, 0, 30, 30);
const dst1 = Rect.fromLTWH(30, 0, 30, 30);
const dst2 = Rect.fromLTWH(0, 30, 30, 30);
const dst3 = Rect.fromLTWH(30, 30, 30, 30);

final recorder = PictureRecorder();
final canvas = Canvas(recorder);
    
canvas
  ..save()
  ..drawImageRect(image, src, dst0, spritePaint)
  ..drawImageRect(image, src, dst1, spritePaint)
  ..drawImageRect(image, src, dst2, spritePaint)
  ..drawImageRect(image, src, dst3, spritePaint)
  ..restore();
    
ui.Image recorderImage = await recorder
  .endRecording().toImage(60, 60);

// 后续渲染逻辑
canvas.drawImage(recorderImage, Offset.zero, ui.Paint()
    ..color = whColour
    ..filterQuality = ui.FilterQuality.high);

解决方法 #

1. 升级Flutter到最新稳定版 #

Flutter 3.3.8属于较早版本，后续稳定版（如3.10及以上）已修复多个aarch64架构下Canvaskit的兼容性问题。执行以下命令升级：

flutter channel stable
flutter upgrade
flutter build web --web-renderer canvaskit --release

重新构建部署后验证问题是否解决。

2. 调整Canvaskit构建参数 #

尝试指定兼容aarch64的Canvaskit版本，或者强制启用Skia相关特性：

flutter build web --web-renderer canvaskit --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://unpkg.com/canvaskit-wasm@0.40.0/bin/

选择与当前Flutter版本匹配的Canvaskit版本（可查看Flutter官方文档对应版本的Canvaskit依赖），避免架构适配问题。

3. 绕过PictureRecorder，直接绘制到目标Canvas #

如果上述方法无效，可跳过中间生成ui.Image的步骤，直接在最终渲染的Canvas上完成合成绘制，避免触发Chrome的兼容性bug：

// 替换原Recorder逻辑，直接在目标canvas上绘制
canvas.save();
// 先绘制底色
canvas.drawRect(const Rect.fromLTWH(0, 0, 60, 60), ui.Paint()..color = whColour);
// 直接绘制四个图像块
canvas.drawImageRect(image, src, dst0, spritePaint);
canvas.drawImageRect(image, src, dst1, spritePaint);
canvas.drawImageRect(image, src, dst2, spritePaint);
canvas.drawImageRect(image, src, dst3, spritePaint);
canvas.restore();

这种方式省去了中间Image的生成与转换，直接完成渲染，规避了PictureRecorder在aarch64构建下的Chrome兼容问题。

4. 检查Chrome环境的WebGL支持 #

确保部署环境的Chrome为最新版本，旧版Chrome对aarch64的WebGL支持存在缺陷。在Chrome地址栏输入chrome://gpu/，查看WebGL 2.0是否启用，若存在报错，尝试启用Override software rendering list选项（在chrome://flags/中搜索该选项），强制启用硬件加速。

内容的提问来源于stack exchange，提问作者Going Bananas