Take square image with Cordova (Phonegap) Camera API?

Question

I have successfully coded the camera API to take and save photos (on iOS). However, I want the photos to be square (like Instagram).

I have set the targetWidth and targetHeight to the same pixels but the images still comes out portrait or landscape, depending on how the phone is held.

My complete API code is:

 navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
    quality: 50, 
    targetWidth: 600, 
    targetHeight: 600, 
    correctOrientation: 1, 
    saveToPhotoAlbum: 1
    });

Does anyone know how to save a square photo with this API on iOS devices?

Answer 1

During my tests I realized same thing, but my intention was opposite. I wanted to preserve the picture's full dimensions, but while the camera was on, a "square overlay" was shown, implying that only the content inside the square would be saved.

Then, I changed the "allowEdit" parameter to "false" instead of "true". Now I can save the full picture. In your case, I can see you are not using this parameter, so maybe you should add that in your code. Example:

navigator.camera.getPicture(onPhotoSuccess, onPhotoFail, {
    quality : 40,
    allowEdit : false,
    destinationType : navigator.camera.DestinationType.DATA_URL, 
    encodingType : navigator.camera.EncodingType.PNG, 
    sourceType : navigator.camera.PictureSourceType.CAMERA,
    targetWidth : width,
    targetHeight : height
});

The width and height seems to be much more related with the aspect ration than with the picture's dimension.

Answer 2

So I've been playing around with this on (iOS only), because I want to get square photos, not rectangular, and here is what I have experienced.

SETTING 1

options: CameraOptions = {
        quality: 40,
        allowEdit: false, // OR unset as to allow default 'false'
        cameraDirection: 1, // BACK: 0 FRONT: 1
        destinationType: this.camera.DestinationType.DATA_URL,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        targetHeight: 200,
        targetWidth: 200
      }

SETTING 2

options: CameraOptions = {
        quality: 40,
        allowEdit: true,
        cameraDirection: 1, // BACK: 0 FRONT: 1
        destinationType: this.camera.DestinationType.DATA_URL,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        targetHeight: 200,
        targetWidth: 200
      }

Setting 1 was returning rectangular photos, with the normal aspect ratio preserved, and one of the sides set (essentially) with the "targetHeight" or "targetWidth" acting as a max-height or max-width.

DOCS: Take a Picture and Return Thumbnails (Resize the Picture)

To get smaller images, you can return a resized image by passing both targetHeight and targetWidth values with your CameraOptions object. In this example, you resize the returned image to fit in a 100px by 100px box (the aspect ratio is maintained, so 100px is either the height or width, whichever is greater in the source).

With Setting 2 the photo would seem to take as normal, then after taking the picture when you get the option accept or retake, there is a yellow frame to the dimensions specified overlaid in the center of the photo, thus showing your cropping after it's approved by the user. So the import distinction here is that it doesn't initially take a square photo, but it will return one.

PLEASE NOTE THAT SETTING 2 MAY NOT WORK ON ANDROID

allowEdit is unpredictable on Android and it should not be used! The Android implementation of this plugin tries to find and use an application on the user's device to do image cropping. The plugin has no control over what application the user selects to perform the image cropping and it is very possible that the user could choose an incompatible option and cause the plugin to fail. This sometimes works because most devices come with an application that handles cropping in a way that is compatible with this plugin (Google Plus Photos), but it is unwise to rely on that being the case. If image editing is essential to your application, consider seeking a third party library or plugin that provides its own image editing utility for a more robust solution.