Ionic Photo Capture & Crop

Question

I have a basic ionic application, i'd like the app to take a photo of the user, and the user can then crop the taken photo to a passport sized photo.

Does anybody know how I can achieve such a thing? I've tried jrcrop but for the life of me I can't get it working.

If you use JCrop you will just get coordination X Y, width, height, eventually you need use back-end server side or native code to crop the image according to given coordination — Abdelrahman M. Allam, Mar 16 '16 at 21:34
Is there not a way to crop the photo in the app and send the photo in a base64 format to the server to save? — Dev.W, Mar 16 '16 at 21:44
you can try the solution from this [link](http://stackoverflow.com/questions/35972433/how-to-take-pictures-and-crop-them-using-ionic-framework-and-cordovacamera-plugi/36012717#36012717) — Anil kumar, Mar 17 '16 at 05:35

score 1 · Answer 1 · edited May 23 '17 at 11:45

For my Ionic app, I used a combination of ng-flow for the upload (on the flow-file-added, validate the file is OK (met file extension/upload requirements etc.)) then initiated an instance of ngCropper to perform the cropping. Once cropping is complete, initiated the flow.upload() on the flowjs object to perform the upload.

It's not possible to provide all my code to this solution, but the real stitching to make this happen occurs after cropping is:

First, retrieve the data URL of the cropped canvas, via a command like var dataUrl = this.$cropCanvas.cropper('getCroppedCanvas').toDataURL();
Create a blob from it, something like this JS function works well.
Remove the original queued upload file (the full image)
Replace it with the cropped blob
Upload.

The replace and upload technique looks like this:

var theBlob = that.dataURLToBlob(dataUrl);
theBlob.name = Utility.generateGuid() + '.jpg'; // give it a new name if you like
// Remove existing image which was added to flow files cache on image dialog select
$scope.flowTileObj.flow.removeFile($scope.flowTileObj.flow.files[0]);
$scope.flowTileObj.flow.addFile(theBlob);
// Perform upload
$scope.flowTileObj.flow.upload();

Best of luck.

score 0 · Answer 2 · answered Mar 17 '16 at 11:58

U need to add this plugin

bower install --save ngCordova
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file
ionic platform add ios

And use this code

<img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" height="200px"/>

   $scope.addImage = function() {
            var options = {
            destinationType : Camera.DestinationType.FILE_URI,
            sourceType : Camera.PictureSourceType.CAMERA, // Camera.PictureSourceType.PHOTOLIBRARY
            allowEdit : false,
            encodingType: Camera.EncodingType.JPEG,
            popoverOptions: CameraPopoverOptions,
        };
        $cordovaCamera.getPicture(options).then(function(imageData) {
            onImageSuccess(imageData);

            function onImageSuccess(fileURI) {
                createFileEntry(fileURI);
            }

            function createFileEntry(fileURI) {
                window.resolveLocalFileSystemURL(fileURI, copyFile, fail);
            }
            function copyFile(fileEntry) {
                var name = fileEntry.fullPath.substr(fileEntry.fullPath.lastIndexOf('/') + 1);
                var newName = makeid() + name;

                window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(fileSystem2) {
                    fileEntry.copyTo(
                        fileSystem2,
                        newName,
                        onCopySuccess,
                        fail
                    );
                },
                fail);
            }
            function onCopySuccess(entry) {
                $scope.$apply(function () {
                    $scope.images.push(entry.nativeURL);
                });
            }

            function fail(error) {
                console.log("fail: " + error.code);
            }

            function makeid() {
                var text = "";
                var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

                for (var i=0; i < 5; i++) {
                    text += possible.charAt(Math.floor(Math.random() * possible.length));
                }
                return text;
            }

        }, function(err) {
            console.log(err);
        });
    }

Thank you for your detailed answer, will this allow the user to take a photo and crop? — Dev.W, Mar 17 '16 at 19:24

Ionic Photo Capture & Crop

2 Answers2