Capacitor camera: reducing image size before uploading

Capacitor
1

Hi there,

I am getting images too large in size despite having adjusted quality, width and height

const image = await Camera.getPhoto({
  quality: 20,
  width : 200,
  height : 200,
  allowEditing: false,
  source: CameraSource.Camera,
  resultType: CameraResultType.Base64
  });

After that I take the base64 and upload it to the server.

However I am getting images in the 2-5MB range of size (Android). Is there any way of reducing/compressing the size further?

Already checked [this]() and other similar postings but they seem to adjust the size by reducing the quality param and the width and height (which are already low in my case)

2

Hey there. I think regardless of what you size the image, base64 is going to produce a large payload. It’s basically just a giant block of unoptimized text.

If possible, try doing a proper file storage detail vs using base64

3

Thanks @mhartington . I’m a newbie: could you explain what do you mean by a proper file storage detail?

ps: Just to clarify, I’m developing an offline first app, so whatever I should do it should be on the client side, no external api allowed

4

Proper file storage would be something off device and using a database like supabase or firebase.

Offline first doesn’t mean “no external API”, just that the app should still work regardles of network status.

5

I used the Camera plugin in an Ionic 3 app and with a quality of 50, 800*600 photo had a size of 2 to 5 Kilobytes, so not sure why your images are so large?

6

PS: I haven’t done this tutorial with the latest Ionic, if you do this, what image sizes do you get…

7

Hi @IonicGeoff i am getting large files with Ionic 6 and Capacitor 3. I ended up using an angular compression plugin to preprocess the image before uploading it

1 Like
8

can you provide an example of code?