我有这个演示代码:
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中获得结果吗?
非常感谢您分享您的知识!
最佳答案
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);
关于flutter - Flutter Web toByteData等待永不返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58851774/