I am trying to get Canvas painted image. It works on web and phone. But when I test it on Mobile Browser the PaintImage() or canvas.drawImage() doesn't work and have error. When I remove PaintImage() it works and I have my canvas image. Anyone had the same problem? Any ideas or other image drawing function for canvas? I can't see the error from debug because you know the Flutter web debugger is poor with reporting. Searching for solution last few days...
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;
}
