Flutter Web，toByteData，await 永不返回答案

【问题标题】：Flutter Web, toByteData, await never returnsFlutter Web，toByteData，await 永不返回
【发布时间】：2020-03-10 02:47:35
【问题描述】：

我有这个演示代码：

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

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

非常感谢您抽出宝贵时间分享您的知识！

【问题讨论】：

标签： flutter dart flutter-web

【解决方案1】：

toByteData 尚不适用于 beta 频道上的 Flutter web。所以解决方法是使用 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);

【讨论】：