How to add crop image using Angular.js

Question

I need one help.I am using Angular.js(i.e-ngFileUpload) to upload image .Here i need to crop that image according to the required height and width.I am explaining my code below.

<input type="file" class="filestyle form-control" data-size="lg" name="uploadme" id="bannerimage"  ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}"  custom-on-change="uploadFile" required="required" ngf-select="onFileSelect($file);">

The controller side code for this is given below.

$scope.onFileSelect = function($files) {
 console.log('file details',$files);
 fileURL=$files;
}

In normal upload i am getting the following console message of image format.

$ngfName: "ADMIN_CATETYPE_IMG_PATHorig_iceproductgrooming2.png"
name: "ADMIN_CATETYPE_IMG_PATHorig_iceproductgrooming2.png"
size: 16903
type: "image/png"

Here i need if the any image will not match the required height and width given it will ask to crop that image and after cropping again the image will set inside the file input field in proper format which is given above.Here i am using angular.js ngFileUpload module.Please help me.

Answer 1

You can use the this ngCrop directive.