Take a square image with the Cordova API (Phonegap)?

Question

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

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

My full API code:

  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 understood the same thing, but my intention was the opposite. I wanted to keep all the image sizes, but while the camera was turned on, a “square overlay” was shown, implying that only the contents 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 see that you are not using this parameter, so perhaps you should add this to 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 }); 

Width and height are apparently much more related to the aspect of the diet than to the size of the image.

Answer 2

So I played with this on (iOS only) because I want to get square photos, not rectangular photos, and this is what I experienced.

SETUP 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 } 

SETUP 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 } 

Option 1 returned rectangular photographs while maintaining a normal aspect ratio and one of the sides set (essentially) with "targetHeight" or "targetWidth" acting as max-height or max-width.

DOCS: take a photo and return thumbnails (resize image)

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

When setting 2, the photo looks as usual, and then after shooting, when you get the accept or re-option, a yellow frame appears with the dimensions indicated in the center of the photo, thus showing your crop after it is approved by the user. Thus, the difference between imports is that initially it does not take a square photograph, but returns it.

PLEASE PAY ATTENTION SETUP 2 MAY NOT WORK ON Android

allowEdit is unpredictable on Android and should not be used! The implementation of this plugin in Android is trying to find and use the application on the user device to crop the image. The plugin does not control which application the user selects to perform image cropping, and it is quite possible that the user could select an incompatible option and cause the plugin to fail. Sometimes this works because most devices come with an application that handles cropping in a way compatible with this plugin (Google Plus Photos), but you should not rely on it. If image editing is important for your application, consider looking for a third-party library or plug-in that provides its own image editing utility for a more robust solution.