Flutter Web CanvasKit下Chrome转Canvas为图片时背景空白问题

该问题并非Blink（Chrome内核）原生Bug，由两点共同导致：

• 绘制逻辑不符合Canvas API规范：代码中调用canvas.saveLayer()后没有编写匹配的canvas.restore()调用闭合图层，属于不规范的API使用方式
• Flutter CanvasKit渲染器的跨浏览器容错差异：当前逻辑先绘制背景、再创建新图层且不闭合，Chrome下CanvasKit执行toImage()捕获RepaintBoundary内容时，不会将saveLayer调用前直接绘制到根画布的背景合并到最终导出的位图中；Safari、Firefox对这类不规范操作的图层合并容错逻辑更宽松，因此表现正常。

方案1：调整图层绘制逻辑（最小改动，优先推荐） #

调整saveLayer的调用时机，显式指定图层边界，所有内容（包括背景）都在图层内绘制，绘制完成后调用restore闭合图层，从根源上规避图层合并问题。
修改CustomPainter的paint方法代码如下：

@override
void paint(Canvas canvas, Size size) {

  _addBackground(ui.Image background, {double scale = 1.0}) {
    final width = background.width * scale;
    final height = background.height * scale;

    final left = (size.width - width) / 2.0;
    final top = (size.height - height) / 2.0;

    paintImage(
      canvas: canvas, 
      rect: Rect.fromLTWH(left, top, width, height),
      image: background,
      fit: BoxFit.scaleDown,
      repeat: ImageRepeat.noRepeat,
      scale: 1.0,
      alignment: Alignment.center,
      flipHorizontally: false,
      filterQuality: FilterQuality.high
    );
  }

  // 显式传入和画布等大的图层边界，不要传null
  canvas.saveLayer(Rect.fromLTWH(0, 0, size.width, size.height), Paint());
  
  if (background != null) {
    final scale = min(size.width / background!.width, size.height / background!.height);
    _addBackground(background!, scale: scale);
  }

  // 原有drawLine线条绘制、TextPainter文本绘制等逻辑保持不变

  // 所有内容绘制完成后必须调用restore闭合图层
  canvas.restore();
}

注意：禁止给saveLayer传入null作为边界参数，CanvasKit在Chrome下对无边界saveLayer的内容捕获存在已知兼容问题。

方案2：切换Web渲染器（快速规避） #

如果调整图层逻辑后仍存在异常，可以放弃CanvasKit渲染器，改用HTML渲染器构建Web端：
flutter build web --web-renderer html
HTML渲染器基于浏览器原生Canvas API实现，不存在CanvasKit的图层合并兼容问题，对于简易绘图类应用，性能完全满足需求，唯一缺点是部分复杂Skia渲染效果的一致性略差于CanvasKit。

方案3：手动合成导出内容（兜底兼容方案） #

如果不想调整现有绘制逻辑，可以绕开RepaintBoundary的自动捕获逻辑，导出时手动合成内容：

• 用Stack组件将背景图放在CustomPaint的下层，不通过CustomPainter绘制背景
• 导出时先捕获CustomPaint层的线条、文本内容，再通过dart的图片处理库，将背景图和上层绘制内容按坐标、缩放比例手动合成，最终输出完整的PNG字节数据
  该方案改动量稍大，但完全不受渲染器兼容问题影响，适配所有浏览器。

• 不要在debug模式下验证导出效果，CanvasKit在debug模式下的图层合成逻辑和release/profile模式存在差异，验证结果不具备参考性
• 加载网络背景图时确保图片服务配置了正确的CORS跨域头，跨域限制也会导致Chrome下Canvas导出时图片被清空，但这类问题控制台会抛出明确的跨域错误，和当前仅背景丢失的表现有明显区别

内容的提问来源于stack exchange，提问作者Taufik Nur Rahmanda