Image Resizing issue on MAUI android app

Question

Requirement :The MAUI android app allows users to capture / pick 75 images with any size and orientation. Here the challenge is to resize these 75 images into a standard size such that it fits the screen and the images maintain its aspect ratio. I have Already tried the below maui code by providing the desired width and height as 400x400 which proportionally resizes to 184x400 for an image of size 1080x2230.

 public static async Task TakePhoto()
 {
     Stream stream = null;
     try
     {
         // Check if picking a photo is supported
         if (MediaPicker.IsCaptureSupported)
         {
             // Pick a photo
             var photo = await MediaPicker.PickPhotoAsync(new MediaPickerOptions
             {
                 Title = "Select a photo"
             });
             // Handle the selected photo
             if (photo != null)
             {
                 // Use the picked photo
                  stream = await photo.OpenReadAsync();
                 // For example, display the photo in an Image control
                 if (stream?.Length > 0)
                 {
                     // Copy the stream to a MemoryStream to ensure it's accessible
                     using var memoryStream = new MemoryStream();
                     await stream.CopyToAsync(memoryStream);
                     memoryStream.Seek(0, SeekOrigin.Begin);
                     // Decode the image with SkiaSharp
                     using var skBitmap = SKBitmap.Decode(memoryStream);
                     using var originalImage = SKImage.FromBitmap(skBitmap);
                     FileInfo fileInfo = new FileInfo(photo.FullPath);
                     int imgSize = Convert.ToInt32(fileInfo.Length);
                     if (imgSize > 100000)
                     {                    
                        IImage newImage= image.Resize(184, 400, ResizeMode.Bleed, true);
canvas.DrawImage(newImage, 10, 10, newImage.Width, newImage.Height);
                     }
                     else
                     {
                         return stream;
                     }
                 }
             }
         }
         else
         {
             await App.Current.MainPage.DisplayAlert("Error", "Photo picking is not supported on this device.", "OK");
         }
     }
     catch (Exception ex)
     {
     }
     return stream;
 }

In the above method when I try to resize an image for example of dimensions [1080x2230] to the new dimensions [184x400] it doesn't maintain the aspect ratio there by resulting the output image to be blur.

PS: The frame size of 400x400 cannot be increased here due to the app design requirement constraints.

Any leads/ input on this would be of great help.

Answer 1

Hello,

In the above method when I try to resize an image for example of dimensions [1080x2230] to the new dimensions [184x400] it doesn't maintain the aspect ratio there by resulting the output image to be blur.

According to the official documentation of Maui Image, when resizing an image using Bleed mode, the image will maintain its aspect ratio based on the cropping method.

Bleed, which clips the image so that it fits its target size, while preserving its aspect ratio.

Have you tried the other two Resize modes? Do you see unexpected behavior?

You can use native methods to scale images to target sizes on the Android platform. Please refer to the following code snippet.

#if ANDROID

		

		public static byte[] ResizeImageAndroid (byte[] imageData, float width, float height)

		{

			// Load the bitmap

			Bitmap originalImage = BitmapFactory.DecodeByteArray (imageData, 0, imageData.Length);

			Bitmap resizedImage = Bitmap.CreateScaledBitmap(originalImage, (int)width, (int)height, false);

			using (MemoryStream ms = new MemoryStream())

			{

				resizedImage.Compress (Bitmap.CompressFormat.Jpeg, 100, ms);

				return ms.ToArray ();

			}

		}

#endif

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.