[web] Zoom out images reduces quality

[c-seeger]

I'm facing a quality issue, when using the zoom function. After picking a high resolution image and cropping it and using the zoom function to zoom out it reduces the image quality (especially on text) heavily creating visible pixel effects on the image.

Simplified Sample Code:

final pFile = await _picker.pickImage(source: source);
final bytes = await pFile!.readAsBytes();
final data = Uint8List.fromList(bytes);
pickedFile = XFile.fromData(data);

final croppedFile = await ImageCropper().cropImage(
  sourcePath: pickedFile!.path,
  compressFormat: ImageCompressFormat.jpg,
  compressQuality: 100,
  uiSettings: buildUiSettings(context),
);

if (croppedFile != null) {
  final bytes = await croppedFile.readAsBytes();
  pickedFile = XFile.fromData(bytes);
}

WebUiSettings:

WebUiSettings(
  context: context,
  presentStyle: CropperPresentStyle.dialog,
  boundary: CroppieBoundary(
    width: screenWidth.round() + 100,
    height: screenHeight.round(),
  ),
  viewPort: const CroppieViewPort(width: 192, height: 192, type: 'circle'),
  enableExif: true,
  enableZoom: true,
  showZoomer: true,
  enableResize: false,
),

[hnvn]

Thanks for your feedback, I am not familiar with Web development, I am sorry that I have no idea about this case, it may be an issue of the native library (Croppie)

[jimmyff]

The issue at the top of issues list when you opened this is the exact same issue: https://github.com/hnvn/flutter_image_cropper/issues/398

[jimmyff]

Thanks for your feedback, I am not familiar with Web development, I am sorry that I have no idea about this case, it may be an issue of the native library (Croppie)

@hnvn I think it's actually the packages implementation of croppie that appears to be problematic. The cropped images are at the wrong size as the plugin is not setting the size parameter to 'original' - see the above issue for details. Also the aspectRatio parameter is not honoured by croppie and the resizing the cropped shape results in visual UI overflow issues.

[hnvn]

@jimmyff , thank you, could you kindly create a PR for this issue?

[muhammadCodeSh]

the image cropper was returen null on web but when I add boundary: CroppieBoundary( width: screenWidth.round() + 100, height: screenHeight.round(), ), property its worked fine