Thinking off an enhancement request.

Polygon , Circle are some of the Shapes that can be considered for future enhancement besides the current rectangle / square. :-)

https://github.com/netplayer/crop You may consider that one for reference.

I use angular-image-crop, declared in my package.sjon :

{
  "dependencies": {
    "@bower_components/angular-image-crop": "andyshora/angular-image-crop#v2.0.0",
  }
}

but npm i send an error :

2593 silly fetchPackageMetaData error for @bower_components/angular-image-crop@github:e-is/angular-image-crop#v2.0.0 premature close

This is due to package.json, that is missing

In the spirit of making this mobile friendly, this could use a pinch zoom in place of the zoom handle as an option for mobile devices. The zoom handle touch performance is a little choppy on Android and a bit unintuitive.

This is because I.E. doesn't support touchmove, or touchend events.

In order to be compatible, you typically have to a check for events:
window.navigator.msPointerEnabled ? "MSPointerMove" : "touchmove"

How to validate when image is being uploaded?
Is there such an option. I think it will be useful to many.

E.g. during upload (means after file selection, before preview) -
show warning if width/height or both less than 800px
show warning if more than 1 MB
aspect ratio based warning.

and, if validation fails ask to browse another image.

Is there a way to make this an option (or default)? I'm loading images from my iphone5 and I initially only see a portion of the wall behind the person-- I always have to zoom out. I'd rather zoom in a little if needed, or pan around. This is great. Thanks.

crop doesn't work inside bootstrap modal,
ng-show="imageCropStep == 1" this imageCropStep not setting inside popup

var modalInstance = $modal.open({
animation: true,
templateUrl: 'elements/imageCrop.html',
controller: 'instanceController',
windowClass:'loginModal',
size: 'lg'
});

Please help...i really need this to be sorted out

When cropping an image, file format is changed, as example if i use a jpeg image, the cropped file is a png with highest weight. Or at least a final file format must be passed to the directive.

Result not updated after reset result, in ur demo, and in my code too...

If I use a 100x100 image, I can't increase its size.

https://imgur.com/ScfYpqc

Grabbing the [] square icon in lower right of image does nothing in Chrome/Mac

The temporary canvas generated for resizing prior to confirming the crop doesn't work on iOS 8.1.2 (not sure if it worked previously).

The demo JSBIN seems almost up to date but I've updated it just in case: http://jsbin.com/liqehiyuyu/3/edit

If you visit the JSBIN page on an iPhone and use the "take a photo" (as opposed to "select from library"). The canvas glitches out, not allowing you to slide the image right. Also, the axis are reversed x-axis touch events trigger y-axis move and vice-versa.

I can't really test on an older version of iOS, is it already known to work there? Note that this doesn't seem to be an issue with photos selected from camera roll / library.

after a bower install/update of the module, it seems that ng-img-crop.js misses its dependencies (i.e. init.js and classes/*), including only ng-img-crop.js doesn't appear to be enough. Compressing all sources into one file solves the issue though. Thanks

I am experiencing problems when changing the 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js'
to the latest build (AngularJS v1.3.8).
Any idea why that is an issue?

is there any way on adding multiple instances on the same page?

With your solution, is there a way to get the original image?

See bower/bower#1388

Please add a release/tag so we can target versions of this repository.

I'm so sorry that I have got the result but I don't know how to upload it to my java server with Spring-MVC?

Can anyone help me?

If this could be an option, it would make it easier to use and wouldn't obscure the image. Perhaps one could specify horizontal instead. And keep your diagonal of course.

This does not log the new value:

$scope.$watch('imageCropResult', function(newVal) {
  if (newVal) {
    console.log('imageCropResult', newVal);
  }          
});

hi, well is there any way to just use image without uploading image ?
i mean i have image source for and i want to crop that image, and in this plugin it is providing upload image button but i want to just crop image without uploading that image bcoz i already have image source/path

Sometimes I have trouble sliding the image around--it's hard to grab ahold of, or it simply doesn't move until I rezoom it.

Using this information below, perhaps you could get rid of the default file upload button, and optionally trigger the file selection to come up initially. From https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method

Using hidden file input elements using the click() method

Starting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), you can hide the admittedly ugly file element and present your own interface for opening the file picker and displaying which file or files the user has selected. You can do this by styling the input element with display:none and calling the click() method on the element.

How do I change the size of the section and canvas cropping area? It defaults to 450x450 pixels and I need to make it smaller to fit my div.

Hi,

Is it possible to set the image from url, as when we are tring we are getting set the src, we are getting error as
"Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."

We'd love to use this in our project pipeline! Could you register it with bower?