BitsetPixels supports this item


34 comments found.

Hi, does this support cross origin images (CORS) e.g. images from amazonS3?


Hi, If you want to use the ability to crop the image into a base64 string inside the browser the answer is no, because the canvas blocks this. But all the other functionality will work just fine, just disable the autocropping and will only provide you with the necessary values for you to send to the server and do the cropping server side. Or you can enable the cross origin resource sharing in Amazon S3 and make use of the autocropping which will provide you with a base64 string to send to your server and process. Cheers!


I hope you are doing well. I wanted to know if you plan to offer update to Angular 2?

I’ll let you know in this comment when it gets updated :)

Thank you so much for the update, looking forward :)

Hi, is there any update on Angular2 version of this plugin?

Hi, just to make sure, can you save the cropped image as an another image? The answer is probably yes but I just want to make sure. Thanks

Ahah you’re right! It’s on the release! I was only paying attention to the box being able to be as small as possible… my bad! Alright, I’ll send it you tomorrow morning. Thanks

No problem, happy to help, and send me the code when you can :)

Hi, is there a way to programmatically set the $data width and height of the crop area? I’m trying to set it through $scope.$croppable.myImage.$data.width = $data.height; but it’s not upload the view. Thanks

Hallo BitsetPixels,

congratulations to your good product! Well done!

I have found a few bugs, though.

1.) A typo in the documentation: the cropper instances expose the property ”$imgInfo”, not ”$imageInfo”, like it says everywhere in the documentation.

2.) It doesn’t have any effect to change “directiveName” in the options object in the controller or via “crop-directiv-name” in the view. The directive name stays ”$croppable” in both cases. Changing it via the following works, though:

module.config(['CroppableDefaults', function(CroppableDefaults) { CroppableDefaults.directiveName = 'theNewName'; }]);

3.) When I limit the size of the img element to which I attach the cropper by surrounding it with a div with size limitations like this

<div style="width:600px; height: 400px"> <img src="some1200x800image.jpg" croppable="cropResult" /> </div>

the selection of the cropper get initialized incorrectly. The selection gets initialized, as if the values from the cropResult were relative to the scaled image and not relative to the unscaled image. As soon as one drags a little bit with the mouse cursor on the handles of the selection, the selected area changes (jumps) to the correct size and everything after works as normal.

When used with size limitations on the img tag like

<img src="some1200x800image.jpg" style="width:600px; height: 400px" croppable="cropResult" />

it gets initialized correctly (treats the values from the cropResult object relative to the unscaled image as it should).

4.) But the 3 issues above are not the reason I am writing this comment, since I was able to work around them. My urgent problem is the following:

Please reproduce it by opening the demo with the parrot at

To test, please change the numbers in the input elements as follow:

Set “Ratio” to 0. Set “Min-width” to 0. Set “Min-height” to 0. Set “Max-width” to 0. Set “Max-height” to 0. Set “Width” to 100. Set “Height” to 123.

Leave “Top” to 25. Leave “Left” to 75.

Now grab the left “center handle” with the mouse and try to move it as briefly as possible to the left.

As you will see, the value “Left” will jump from 75 to 175 (it seems like the value of “Width” gets added to the value of “Left”) and the selected area will jump accordingly. This can also be reproduced every time I change the values of the cropResult object programmatically. Everytime I change the values, the selected area “jumps” to the right the first time I grab a handle with the mouse cursor and drag it as briefly as possible. This seems to be an issue of the two way binding. Maybe it changes the value “Left” to “Left + Width” every time a value is changed. But this is just a guess which would fit to my observations. It would be nice, if you could focus on this issue, because I have to change the cropResult values programmatically and did not find a way to work around it even though I need it urgently.

Thanks in advance!

PS: In the “Properties description” in the documentation under “View description of property: $measurment” it says “[...] this values are relative to the scaled image, or the visible image. Since we live in a web of responsive images, this helps us keep track of the position of the cropper inside the resized image, so always keep this in mind.” maybe I am confused, but isn’t croppers concept of making the values relative to the UNscaled image because of responsive images? The $measurment property is useful and it is good to have the values relative to the scaled image, but I currently can not understand why this comes handy with responsive images. Maybe the text “Since we live in a web of responsive images…” should be moved to a part of the documentation where values are relative to the UNscaled image. This is of course not important, but it got me confused.

Hallo BitsetPixels, I am still waiting for your reply. Are there any news?

I am still waiting.

Hallo BitsetPixels, what is the current status of this?

You have an example using ng-file-upload?

Hello, I ran through the installation process and used Grunt to compile files, but I have a $parse….assign is not a function. Any idea how to solve this ? I tried using the minified/not minified version without any success.

Hi I have two problems:

1. I am getting this error every-time I change corner of the handle. I use Angular 1.5.

angular.js:13642 TypeError: $parse(...).assign is not a function at angular.cropper.js:859 at angular.js:19308 at completeOutstandingRequest (angular.js:5912) at angular.js:6191

Problem 2. When I choose file from the “file” input and use FileReader API and then pass the base64 into ng-src for the image, the cropper is not appearing. I can see image but no handlers. Is there a way to initialize cropper once the file is ready? The scenario is that user uploads a logo and then crop it and save the cropping result to the server.

Thanks, Kris

Can you send me a file with working crop? A can’t understand how use your plugin….


spoof3r Purchased

When my users crop an image, I also need to show them the bleed area based on the product they are working with. I was hoping to just dynamically resize the border, but this did not seem to work. How might I achieve this result?

Hi, I have some problems with your plugin. I can move and resize the cropper, but I get ”$parse(...).assign is not a function” all the time. When I try to crop the area, I get “TypeError: self.makeCropData is not a function”.

This i my code:

<button type=”button” class=”btn btn-default” ng-click=”crop()”>Crop It! </button>

$scope.crop = function() { console.log($scope.$croppable.cropInstance.$cropIt().base64); };

Can you please help me?


spoof3r Purchased


I want to set the min/max width/height for cropping based on the image size that is loaded. In other words, I always want one of the dimensions (either the width or height) to be the exact same size as the image. Basically you can imagine this will only allow my users to drag the crop area either up/down, or left/right based on which dimension is the same size as the image.

I am trying to update my cropperOptions object inside my callback function for imageLoaded, but for some reason this isn’t doing anything.

Please tell me how I can achieve this desired functionality.


Hi, very nice plugin. do you plan to add rotate feature? i use it to crop incoming faximiles, sometimes they are rotated 180 degrees


salperg Purchased

I added my project angular.cropper.js ,angular.cropper.css ,and also added ‘bp.img.cropper’ app.js file in our angularjs project

However in html page

croppable directive doesnot work.

I m not able show crop area

What is the reason?

Could you help me pls?


philly1 Purchased

Please can you refund me for this purchase. After downloading it I realise how much effort is required to install this when using gulp. The installation is long winded and no one uses grunt anymore. Seems pretty out of date and many bugs have been reported without fixes. This should be easy to install by simply being given access to a private git repositry and saying bower install angular-cropper—save. This on its own requires me to spend hours integrating it which is not what you should be doing with a paid product.