移动浏览器上的 Flutter web PaintImage() 错误答案

【问题标题】：Flutter web PaintImage() on Mobile Browser error移动浏览器上的 Flutter web PaintImage() 错误
【发布时间】：2022-01-06 06:30:07
【问题描述】：

我正在尝试获取 Canvas 绘制的图像。它适用于网络和电话。但是当我在移动浏览器上测试它时，PaintImage() 或 canvas.drawImage() 不起作用并且有错误。当我删除 PaintImage() 它可以工作并且我有我的画布图像。有人有同样的问题吗？画布的任何想法或其他图像绘制功能？我无法从调试中看到错误，因为您知道 Flutter Web 调试器的报告功能很差。最近几天正在寻找解决方案...

Future<ui.Image> getCanvasImage() async {
    Size imageSize = const Size(1200, 630);
    final recorder = ui.PictureRecorder();
    final canvas = Canvas(recorder,Rect.fromPoints(const Offset(0.0, 0.0), Offset(imageSize.width, imageSize.height)));

    canvas.drawRect(Rect.fromLTWH(0.0, 0.0, imageSize.width, imageSize.height),Paint()
          ..shader = ui.Gradient.linear(
              const Offset(0, 0), Offset(imageSize.width, imageSize.height), [
            const Color.fromRGBO(23, 74, 151, 1),
            const Color.fromRGBO(90, 168, 200, 1),
          ]));
    like = await loadUiImage('lib/assets/like.png');
    var rect = Rect.fromLTWH(
      100,100,100,100,
    );
    //canvas.drawImageRect(like, maskSourceRect, rect, paint);
    //canvas.drawImage(like, Offset.zero, Paint());
    paintImage(canvas: canvas, rect: rect, image: like, debugImageLabel: 'lake');
    final picture = recorder.endRecording();
    final img =
        picture.toImage(imageSize.width.toInt(), imageSize.height.toInt());
    return img;
  }
}
Future<ui.Image> loadUiImage(String imageAssetPath) async {
  final ByteData data = await rootBundle.load(imageAssetPath);
  final Completer<ui.Image> completer = Completer();
  ui.decodeImageFromList(Uint8List.view(data.buffer), (ui.Image img) {
    return completer.complete(img);
  });
  return completer.future;
}

【问题讨论】：

标签： flutter canvas flutter-web flutter-web-browser

【解决方案1】：

如果有人遇到类似问题，将 --web-renderer canvaskit 添加到构建解决了我的问题。

这里是如何在本地调试你的 web 以在移动浏览器上测试你的 Flutter web 应用程序：

flutter run -d web-server --web-hostname 0.0.0.0 --web-port 8080 --no-sound-null-safety --release --web-renderer canvaskit

然后从移动浏览器输入您的 pc ip 地址和 :8080 端口。要查看调试结果，请将您的手机连接到电脑并在 Chrome 导航器上输入 chrome://inspect

【讨论】：