flutter - Flutter Web toByteData等待永不返回

Question

我有这个演示代码:

import 'dart:convert';
import 'dart:ui';

void main() async {
  final pictureRecorder = PictureRecorder();
  Canvas(pictureRecorder).drawCircle(
    const Offset(100, 100),
    100,
    Paint()..color = const Color.fromARGB(255, 255, 0, 0),
  );
  final picture = pictureRecorder.endRecording();
  final image = await picture.toImage(200, 200);
  print('//1 before toByteData await');
  final rawByteData = await image.toByteData(format: ImageByteFormat.rawRgba);
  print('//2 after toByteData await');
  final encoded = base64.encode(rawByteData.buffer.asUint8List());
  print('//3 base64: $encoded');
}

如预期的那样，在移动设备上的结果是:

I/flutter (18489): //1 before toByteData await
I/flutter (18489): //2 after toByteData await
I/flutter (18489): //3 base64: AAAAAAAAAAAAAAAAAAAAAA.. (all the base64 string)

网络上的结果:

//1 before toByteData await

而且永远不会返回结果，有人可以解释一下如何在Web中获得结果吗？

非常感谢您分享您的知识!

Answer 1

toByteData尚不适用于beta channel 上的Flutter网站。
因此，解决方法是使用html canvas生成图像。

import 'package:universal_html/html.dart' as html;

final htmlCanvas = html.CanvasElement(width: size.width.floor(), height: size.height.floor());
final html.CanvasRenderingContext2D context = htmlCanvas.getContext("2d");
context.fillStyle = 'white';
context.fillRect(0, 0, size.width, size.height);
for (int i = 0 ; i < _paths.length ; i++) {
    context.strokeStyle = 'red';
    context.lineWidth = _paths[i].key.strokeWidth;
    context.beginPath();
    context.moveTo(caculatedOffset.dx, caculatedOffset.dy);
    for (int j = 1 ; j < _paths[i].value.length ; j ++) {
        context.lineTo(caculatedOffset.dx, caculatedOffset.dy);
    }
    context.stroke();
}

final blob = await htmlCanvas.toBlob('image/jpeg', 0.8);