Flutter Web, toByteData, await never returns - flutter

Question

I have this demostrative code:
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');
}
The result on a mobile is, as expected:
I/flutter (18489): //1 before toByteData await
I/flutter (18489): //2 after toByteData await
I/flutter (18489): //3 base64: AAAAAAAAAAAAAAAAAAAAAA.. (all the base64 string)
The result on a web:
//1 before toByteData await
And never return the result, can somebody explainme how can I get the result in web?
Thank you very much for your time sharing your knowledge!

Answer 1

toByteData doesn't work for Flutter web on beta channel yet.
So workaround is to use html canvas to generate image.
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);