Android: When a photo is taken or uploaded using the capacitor camera plugin the resizing produces poor image quality with jagged lines

[samiMotorC]

Bug Report

Plugin(s)

[capacitor] @capacitor/[email protected]

Capacitor Version

   Capacitor Doctor   

Latest Dependencies:

  @capacitor/cli: 6.2.0
  @capacitor/core: 6.2.0
  @capacitor/android: 6.2.0
  @capacitor/ios: 6.2.0

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/cli: 6.2.0
  @capacitor/android: 6.2.0
  @capacitor/core: 6.2.0

Platform(s)

Android

Current Behavior

When a photo is resized down using the built in capacitor camera plug in the output image seems to lose quality creating a very pixilated image with jagged edges. This occurs with both CameraSource.Photos and CameraSource.Camera.

Expected Behavior

The image size is reduced but image maintains its quality with smooth edges and way less pixelated

Code Reproduction

Clone the following Ionic app repo and build it onto an android device.

https://github.com/samiMotorC/RtsScanner

Open the app and use it to take a photo or to upload an image from your gallery.
View the output image and double tap to zoom in, better revealing the pixelation.

Other Technical Details

Additional Context

Tested on Samsung Galaxy S22 Ultra (Camera resolution 1868x4000px)

Images resized to 1024x1024px

I believe the issue is due to the following scaling algorithm used by the camera capacitor plugin:

capacitor-plugins/camera/android/src/main/java/com/capacitorjs/plugins/camera/ImageUtils.java

Line 63 in 8c24903

return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);

A similar issue is mentioned in this stackoverflow issue using createdScaledBitmap results in pixelated images. The top answer supplies an alternative means of scaling using Bitmap.createBitmap and Canvas.

Here is a comparison of the pixelated capacitor image:

Compared to an image taken using the same device and resized to the same size using JavaScript: