Ionic cropping an image without UI

2
votes

Problem

I have been trying for awhile without success to crop an base64 image taken from the camera using the camera preview plugin to a 4:3 resolution without any cropping input being done by the user.

Most plugins I have tried so far force a UI but for my purpose it needs to crop to 4:3 to then be sent to a server all as the same resolution.

What i've tried

I have tried tweaking the ionic native plugin without success. Also i've tried numerous different Cordova plugins that have been suggested from other forum posts such as:

All of those as far as I know force a UI as well as don't allow you to specify an aspect ratio.

1
javascriptcordovaionic-frameworkcropaspect-ratio
We solved this by cropping on the server so we could control the crop. Turned out cropping in iOS and Android was not consistent. - Bas van Dijk
@BasvanDijk Thank you for the quick response, we ended up taking your advice and writing a Laravel controller to handle the images on sending them to the server. - Andrew Gosselin

1 Answers

1
votes

In our app we needed cropped pictures as well. However it turned out (especially on Android devices) that the way you can crop after taking a picture depends on brand, model and even the camera app.

In Ionic 3 the camera plugin has an option allowEdit. There are some side effects when you set this to true. For example some users cropped there pictures in a very weird aspect ration like: 1:15, so a very small width, and a very large height. Keep this in mind when you allow your users to edit their pictures.

To get consistent crops we have implemented the cropping server side. In order to speed things up we only resize the picture on the client and upload the resized picture to the server.