ngCordova Camera - Take square pictures like instagram (iOS)?

Question

I have my Ionic app taking pictures with the ngCordova camera plugin, but I want the pictures to be square. I also need an overlay if possible that shows which area is going to be cropped. Here is the code I'm using:

$scope.getPhoto = function() {

Camera.getPicture().then(function(imageURI) {
    console.log(imageURI);
    $scope.lastPhoto = imageURI;
}, function(err) {
    console.err(err);
}, {
    quality: 75,
    targetWidth: 320,
    targetHeight: 320,
    saveToPhotoAlbum: false
});

};

Thanks for the help

Visional

I have the same question! – Narvik

Answer 1

I followed Nic Raboy's tutorial and managed to get everything working using the following settings 'allowEdit', 'targetWidth' & 'targetHeight'.

Tutorial URL - https://blog.nraboy.com/2014/09/use-android-ios-camera-ionic-framework/

If you need any assistance just let me know,
Good luck!

Controller JS

cameraApp.controller("cameraApp", function($scope, $cordovaCamera) {

    $scope.takePicture = function() {
        var options = { 
            quality : 75, 
            destinationType : Camera.DestinationType.DATA_URL, 
            sourceType : Camera.PictureSourceType.CAMERA, 
            allowEdit : true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 300,
            targetHeight: 300,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
            $scope.imgURI = "data:image/jpeg;base64," + imageData;
        }, function(err) {
            // An error occured. Show a message to the user
        });
    }

});

Oscitant

Perfect. Thank you – Plassey