Package has stopped working on web after upgrade to flutter 3.0 version

[zombie6888]

Thank you for nice package! It's very simple to use. I've tried to upgrade to a new flutter 3.0 version and faced with problem on web. It doesn't cause any errors but render blank image when cropped. After downgrade to flutter version 2.10 it works as before

[deakjahn]

Who would've thought? :-)

Actually, this is just a convenience function on the controller and calls some Flutter functions that used to create problems in the past, too:

crop_image/lib/src/crop_controller.dart

Lines 122 to 135 in 0a8cb04

	Future<ui.Image> croppedBitmap(
	{ui.FilterQuality quality = FilterQuality.high}) async {
	final pictureRecorder = ui.PictureRecorder();
	Canvas(pictureRecorder).drawImageRect(
	_bitmap,
	cropSize,
	Offset.zero & cropSize.size,
	Paint()..filterQuality = quality,
	);
	//FIXME Picture.toImage() crashes on Flutter Web with the HTML renderer. Use CanvasKit or avoid this operation for now. https://github.com/flutter/engine/pull/20750
	return await pictureRecorder
	.endRecording()
	.toImage(cropSize.width.round(), cropSize.height.round());
	}

So, I think we have to wait a little to see what other bug reports complain about this again.

[deakjahn]

@zombie6888 Could you help me with this? I created a small repro to show the problem but, since I have moved on to 3.0 now, I can't test it on the earlier Flutter any more.

It's a simple page that should show the image somewhat cropped in the middle. If you uncomment the first line in croppedBitmap(), it returns the full bitmap, if you comment it, it crops. 3.0 does the first, but fails with the second. If it works on the earlier version, I use this repro to report the bug to Flutter.

crop_repro.zip

[zombie6888]

Done, your example works in 2.10.5. What i did:

1. replace flutter_lints: 2.0.0 with flutter_lints: ^1.0.0
2. remove web folder
3. run commands :
   flutter downgrade 2.10.5
   flutter clean
   flutter pub get
   flutter run -d chrome --web-renderer canvaskit

crop_repro_flutter_2.10.zip

[deakjahn]

Thanks a lot, I'll report it right away.

[deakjahn]

@zombie6888 flutter/flutter#103803

Let's hope for the best...

[deakjahn]

@zombie6888 Fortunately, it was accepted as a reproducible regression, so I expect a quick fix.

[zombie6888]

Perfect! Btw, i have a question that is not related to issue, i can create separate thread but ask here if you don't mind.

Is it possible to convert Picture to Uint8List instead of Picture.toImage() somehow? I use ImagePicker and another package which is convert bytes(from png source for example) to jpeg. So i think i use a lot of redundant conversions on the web: First i convert picked image to bytes by using XFile.readAsBytes() method, then i place it to Image.memory() and cropped by Picture.toImage(), then, in order to get byteArray again i use Image.toByteData method, decode obtained byteArray and convert to jpeg by using this package https://pub.dev/packages/image and finally pass jpeg encoded bytes to backend services.

It works well, but i am not sure that it's a proper way to do such things. it also would be better if toByteData method has ImageByteFormat jpeg support but it works with png only.

[deakjahn]

If you also want to crop, you have to use the Canvas and that comes with Picture.toImage(), anyway. If your only problem is that you want to use jpeg, this is what I do in a program of mine:

Future<Uint8List> convertImage(ui.Image image, String format) async {
  switch (format) {
    case 'image/bmp':
      final data = await image.toByteData(format: ui.ImageByteFormat.rawRgba);
      return SimpleBmp().compress(data!.buffer.asUint8List(), image.width, image.height);
    case 'image/png':
      final data = await image.toByteData(format: ui.ImageByteFormat.png);
      return data!.buffer.asUint8List();
    case 'image/jpeg':
      final data = await image.toByteData(format: ui.ImageByteFormat.rawRgba);
      return SimpleJpeg().compress(data!.buffer.asUint8List(), image.width, image.height, 90);
    case 'image/x-rgb':
      final data = await image.toByteData(format: ui.ImageByteFormat.rawRgba);
      return data!.buffer.asUint8List();
  }
  throw UnsupportedError('convertImage: $format is not supported');
}

As you can see, instead of using that image package, I use my own two classes, SimpleBmp and SimpleJpeg. Both are very simplistic and do nothing else but to create the simplest, easiest BMP or JPG (having said that, of course, the BMP code is much simpler). The second is just a Dart port of some code of Jon Olick, http://jonolick.com that I found floating around the web.

Actually, I also have a SimplePng there. I can't recall why but I probably used it somewhere...

SimpleBitmaps.zip

[zombie6888]

This is exactly what i need. Thank you!

[rafaelmaia8384]

It's a CanvasKit problem. This solves the problem for now:

flutter run -d chrome --web-renderer canvaskit --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false --profile

[deakjahn]

@zombie6888 Come to think of it, I made it into a very simple package: https://pub.dev/packages/jpeg_encode

[mdrideout]

Here is a package that does the image cropping separately (including web), and uses crop values generated by the crop_image UX. https://pub.dev/packages/cream_of_the_crop