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.

If you read the README docs of ngFileUpload, in the features list it mentions cropping and has a sample jsfiddle for integrating it with ngImgCrop to crop images: jsfiddle.net/xxo3sk41/1 — danial
– danial, Commented Dec 12, 2015 at 18:43

Tarun Dugar · Accepted Answer · 2015-12-12 06:51:56Z

1

You can use the this ngCrop directive.

answered Dec 12, 2015 at 6:51

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

satya Over a year ago

Let me to implement this and then i will confirm you.

satya Over a year ago

Its working fine but some issue.I need some validation of this image field.

Collectives™ on Stack Overflow

How to add crop image using Angular.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related