crackerakiua/ui-cropper

Image Crop directive for AngularJS

uiCropper

Simple Image Crop directive for AngularJS. Enables to crop a circle, square or rectangle from of an image.

Live demo

Test it yourself, upload or choose an image from url in our amazing Online test suite

or pick a Codepen to play around with it
Codepen: Circle + Chargement Crop
Codepen: Square + Init Url Crop + Maximum rendered image
Codepen: Rectangle Crop
Codepen: Rectangle Crop + Crop info
Codepen: Rectangle With Aspect Crop and Max Init
Codepen: Rectangle + Aspect + Array Crop
Codepen: Rectangle + CSS Crop
Codepen: Different sizes

News

We just moved this lib to new name, before you add it to your please do tests.

Contribution

If you want to contribute, please join our gitter chat.

Installing

Download directly

Download ui-cropper files from GitHub

Bower

bower install ui-cropper

NPM

npm install ui-cropper

Meteor

meteor npm install --save ui-cropper

How to Use

angular.module('app', ['uiCropper'])
.controller(function($scope){
	$scope.myImage = 'https://raw.githubusercontent.com/CrackerakiUA/ui-cropper/master/screenshots/live.jpg';
	$scope.myCroppedImage = ''; // in this variable you will have dataUrl of cropped area.
});

<ui-cropper image="myImage" result-image="myCroppedImage"></ui-cropper>

Documentation

You can checkout all options under our wiki page

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

See the LICENSE file

ui-cropper's Issues

Undocumented feature - "canvas-scalemode"

I am find undocumented feature - "canvas-scalemode". Write about her in wiki-page 😉

Doesn't work if there is zoom style on any of the parent

If there is a css zoom on any of the parents, the crop handles doesn't work. The image loads and the default crop area is also shown. But the crop area can't be changed. I am not sure if this is an issue with the library or with HTML5 canvas. The X and Y points detected from the touch event doesn't map to actual point of the crop handle, it seems.

I modified onMouseUp, onMouseDown, and onMouseMove and divided pageX and pageY with the css zoom value of the page. This solved the issue for me. But this is not a permanent solution because zoom can be applied to any element in the parent hierarchy and can cause an issue.

Demo's outdated and not working with new version

The demo's still use the old ngImgCropper. I edited one to include the new files and module name but it doesnt work.

Any idea why? @CrackerakiUA

http://codepen.io/anon/pen/dNNweQ

Crop an area larger than the box

I want to crop to an area larger than the adjustable crop area. I don't want to make the crop area larger, because I'm going to be showing the image at different widths (same height), and I want the user to size the image for the smallest possible width that will be shown.

Basically, I need the dashed adjustable area to be smaller (and a different aspect ratio) than the crop area. Where do I need to adjust the code to make that happen?

Aspect ratio not working on IE11

In IE11 on windows 7, I'm trying to set fixed aspect ratio, but it acts weird, and if console is open, it's throws IndexSizeError.

Example can be seen here: http://codepen.io/anon/pen/amgXPg

White lines appearing on cropped img

Hey,

Sometimes i get some white lines , either horizontal or vertical ones, on my cropped img. Can't really say how i manage to get these, it seems kinda random.

Any ideas how to get rid of those ?

Can't install with bower

Hi,
I am currently trying to add your plugin to my project but unfortunately it always fails :

bower install ui-cropper --save
bower ui-cropper#*          not-cached https://github.com/CrackerakiUA/ui-cropper.git#*
bower ui-cropper#*             resolve https://github.com/CrackerakiUA/ui-cropper.git#*
bower ui-cropper#*            checkout 1.0.3
bower ui-cropper#*            resolved https://github.com/CrackerakiUA/ui-cropper.git#1.0.3
bower angular#>=1.4.0       not-cached https://github.com/angular/bower-angular.git#>=1.4.0
bower angular#>=1.4.0          resolve https://github.com/angular/bower-angular.git#>=1.4.0
bower angular#>=1.4.0         checkout v1.6.1
bower angular#>=1.4.0         resolved https://github.com/angular/bower-angular.git#1.6.1
bower angular#1.2 - 1.5     not-cached https://github.com/angular/bower-angular.git#1.2 - 1.5
bower angular#1.2 - 1.5        resolve https://github.com/angular/bower-angular.git#1.2 - 1.5
bower angular#1.4.5         not-cached https://github.com/angular/bower-angular.git#1.4.5
bower angular#1.4.5            resolve https://github.com/angular/bower-angular.git#1.4.5
bower angular#1.4.4         not-cached https://github.com/angular/bower-angular.git#1.4.4
bower angular#1.4.4            resolve https://github.com/angular/bower-angular.git#1.4.4
bower angular#1.3.18        not-cached https://github.com/angular/bower-angular.git#1.3.18
bower angular#1.3.18           resolve https://github.com/angular/bower-angular.git#1.3.18
bower angular#*             not-cached git://github.com/^1/2.git#*
bower angular#*                resolve git://github.com/^1/2.git#*
bower angular#>=1.0.6           cached https://github.com/angular/bower-angular.git#1.6.1
bower angular#>=1.0.6         validate 1.6.1 against https://github.com/angular/bower-angular.git#>=1.0.6
bower angular#^1.2              cached https://github.com/angular/bower-angular.git#1.6.1
bower angular#^1.2            validate 1.6.1 against https://github.com/angular/bower-angular.git#^1.2
bower angular#>=1.0.8           cached https://github.com/angular/bower-angular.git#1.6.1
bower angular#>=1.0.8         validate 1.6.1 against https://github.com/angular/bower-angular.git#>=1.0.8
bower angular#>= 1.0.8          cached https://github.com/angular/bower-angular.git#1.6.1
bower angular#>= 1.0.8        validate 1.6.1 against https://github.com/angular/bower-angular.git#>= 1.0.8
bower angular#>= 1.2.23         cached https://github.com/angular/bower-angular.git#1.6.1
bower angular#>= 1.2.23       validate 1.6.1 against https://github.com/angular/bower-angular.git#>= 1.2.23
bower angular#1.4.5           checkout v1.4.5
bower angular#1.2 - 1.5       checkout v1.5.11
bower angular#1.3.18          checkout v1.3.18
bower angular#1.4.4           checkout v1.4.4
bower angular#1.4.5           resolved https://github.com/angular/bower-angular.git#1.4.5
bower angular#1.3.18          resolved https://github.com/angular/bower-angular.git#1.3.18
bower angular#1.4.4           resolved https://github.com/angular/bower-angular.git#1.4.4
bower angular#1.2 - 1.5       resolved https://github.com/angular/bower-angular.git#1.5.11
bower angular#*                ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/^1/2.git", exit code of #128 fatal: unable to access 'https://github.com/^1/2.git/': The requested URL returned error: 400

Additional error details:
fatal: unable to access 'https://github.com/^1/2.git/': The requested URL returned error: 400

`

I have tryed bower cache clean and git config --global url."https://".insteadOf git:// but nothind solved this ...

Any help appreciated !

Regards,
Valentin

Merge image angle with README

This changes needs to be in our lib.
luoliang222@4f7d488

I'll try and make a PR with the readme updated.

npm release

Any chance on a new npm release?

Pinch capability for touchscreen

Hello!

Is there a way to embed pinch-zoom functionality on the canvas?

It'd be wonderful if we can resize the crop-area by pinching it in (and out)..

Thanks'

Iphone height issue

Hi, in the iphone the height of the image is not being showed correctly I tried changing the height to 100vh and the image is showed as it should be, but the circle used for the cropping is lost completely, I dont know if Im making a mistake in the implementation, everything seems to be as it should be.

Hi, I want to set size for crop-area and disable it for user, and user just move the crop-area. How can I achieve this? Thanks

Hi,
I want to set size for crop-area and disable it for user, and user just move the crop-area.
How can I achieve this?
Thanks

Allow Crop On Resize Corners?

I was hoping this prop would not allow for the croping rectangle to resize. Doesn't seem to be the case?

Unable to change crop area on Android

I'm building an android app using cordova and angularjs. Everything is working fine when I test the app on my browser. But when I build the APK and test on android emulator or on android device, I can't change the crop area. I am able to select an image and the image successfully loads in canvas. The preview is also updated. But when I drag on canvas to change the crop area, the page scrolls without causing any change to the canvas.

I did a console.log on onMouseMove, onMouseDown and onMouseUp methods in ui-cropper.js. The events are getting triggered.

Any idea what would be wrong?

init-max-area not working for rectangle when new image is loaded

Dear all,
I love ui-cropper and we are planning to use it in our project.
However, we have an issue: When area-type is "rectangle", init-max-area="true", no aspect-ratio is set and a new image is loaded into the image attribute (via file upload). The area is not set to the full size of the new canvas/image.
There must be some bug in the calculations in crop-host.js in the resetCropHost function.
The issue is reproducible at
http://codepen.io/Crackeraki/pen/zvWqJM
when removing the aspect-ratio and doing the following steps:

1. load an image
2. select an area (possibly not squared)
3. load a new image

Any idea what might cause this?

I have a very expensive workaround:

1. set the aspect-ratio temporarily and call angular digest
2. set the new image and call angular digest
3. set the aspect-ratio to null and call angular digest.

this only works by changing the watcher on the attribute aspect-ratio s.t. it resets crop-host when the aspect-ratio is set to null (it currently only updates when a value <> null is given).

Safari XMLHttpRequest cannot load

On Safari (only) when uploading a file (input file), I've got this error: XMLHttpRequest cannot load data:image/png;base64,.... cross origins requests are only supported by http.

Any idea ?

Uploaded image don't use all the available space when using init-max-area="true"

I've been trying to use ui-cropper to crop and upload an image. To do this, I created a div to show the uploaded image and the crop tool, using the following code:

<div 
    ngf-drop 
    ng-model="headerImage" 
    ngf-pattern="image/*" 
    class="cropArea"
    flex>
    <ui-cropper
        image="headerImage | ngfDataUrl"
        area-type="rectangle"
        ng-init="croppedDataUrl=''"
        aspect-ratio="2.6"
        result-image="croppedDataUrl"
        result-image-size="{w:960,h:370}"
        init-max-area="true">
    </ui-cropper>
</div>

<div>
    <img ng-src="{{croppedDataUrl}}" alt=""/>
</div>

But when I upload an image, the image is not using the entire space of the ui-crop area, like this:

What can it be?

Show preview only on button click.(blockingObject.render - error)

Hello,
I'm using crop inside model popup
i want to get
app.controller('ModalController', ['$scope', '$element', 'close', 'ModalService',
function ($scope, $element, close, ModalService) {
$scope.imgChannel = '';
$scope.imgCropPreview = '';
$scope.blockingObject = { block: true};
$scope.ShowPreview= function () {
$scope.blockingObject.render(function (dataURL) {
console.log('via render');
console.log(dataURL.length);
});
$element.modal('hide');
close('', 500);
}
};
}]);

but i'm getting error "TypeError: $scope.blockingObject.render is not a function"

did i miss anything here?

Adding transparent when not giving any aspect ratio

Actually I was trying to let user crop how he needs to, without any size restriction
cropper is working but I can't get image's size what user cropped, instead of this, it is adding a transparent part to maintain height and width and making an Image of 200 by 200 PX that it by default uses as written in API, take a look at the Screen shot

Please add this feature

Image cut but not cropped, see result image

Is it already stable enough?

Because when I install this package an add it to as a dependency and add the directive to my html it won't work..

When I use the ngImgCropFullExtended package and do the same steps I does work..

Thanks in advance..

MegaPixImage fails for strict-di

I'm using ES6 with webpack and strict di.

The error I'm getting after importing 'uiCropper' is:

Error: [$injector:strictdi] MegaPixImage is not using explicit annotation and cannot be invoked in strict mode

even though MegaPixImage has nothing to do with angular.
Any thoughts?

result-image-format not working after upgrading from ng-img-crop to ui-cropper

Previously the data-uri in "result-image" would start with "data:image/jpeg..." but after upgrading the library to ui-cropper the data-uri in "result-image" starts with "data:image/png...", even though I have set "result-image-format='image/jpeg'".

Here is how I am declaring the directive attributes:
<ui-cropper area-type="square" image="$ctrl.avatar.original" result-image="$ctrl.avatar.cropped" result-image-format="image/jpeg" result-image-size="240"></ui-cropper>

result-image-size attribute issue

result-image-size attribute issue when giving from a scope variable;
in my controller, I am defined the cropping image size as
$scope.size = '{w: 340,h: 200}';
Then
<ui-cropper result-image-size="'{{size}}'" aspect-ratio="1.7" image="file" area-type="rectangle" result-image="result_img" result-blob="result_blob" init-max-area="true"></ui-cropper>
getting this error

Provide an option to hide loading image.

Provide an option to hide loading image or to modify loading image style.

Resize Coordinates Position

Hello Honchar,
I know little English. So, I've a problem associated with this plugin. I use your cropper plugin in my AngularJS Project. But resize coordinates doesn't work. Resize coordinates and mouse coordinates looks different from each other when resizing. How to fix this problem?
I'm using AngularJS v1.3.7 and Bootstrap v3.3.5

1px difference between several cropped images' height

Hello,

I'm using the directive with the following options :

<ui-cropper image="file" result-image="fileProcessed" area-type="rectangle" canvas-scalemode="full-width" aspect-ratio="1.25" result-image-format="image/jpeg" result-image-size="400"></ui-cropper>

The resulting image should be 400x320px.
However, sometimes it's resulting 400x319px.

Is there a reason for that, and a way to fix it ?

Cropper not rendered into ui bootstrap modal

Hi, I have an issue in rendering cropper into ui bootstrap modal. It works well for smaller images, but not for bigger ones. This is weird issue since it's worked well before. Not sure since when it's started not working. Let me share some of codebase.

angular.element(document.querySelector('#cover-photo-trigger')).on('change', function(evt) {
          var file = evt.currentTarget.files[0];
          var reader = new FileReader();
          reader.onload = function () {
            var image = new Image();
            image.onload = function() {
                    var modalInstance = $modal.open({
                      templateUrl: 'views.promoter.modals.cover-upload',
                      controller: function($scope, $modalInstance, data) {
                        $scope.image = data.image;
                        $scope.croppedImg = '';
                        $scope.width = data.width;
                        $scope.height = data.height;

                        $scope.cancel = function() {
                            $modalInstance.dismiss('cancel');
                        }

                        $scope.cropImage = function() {
                            $modalInstance.close($scope.croppedImg);
                        }
                      },
                      size: 'lg',
                      windowClass: 'cover-popup',
                      resolve: {
                        data: function () {
                          return {
                            image: reader.result,
                            width: image.width,
                            height: image.height
                          };
                        }
                      }
                    });

                    modalInstance.result.then(function (croppedImg) {
                      ...
                    }, function () {
                      console.log('modal dismissed');
                    });
            }
            image.src = reader.result;            
          };
          if (file) {
            reader.readAsDataURL(file);
            angular.element(document.querySelector('#cover-photo-trigger'))[0].value = ''; 
          }
        });

Here is modal template:

<div class="modal-header">
  <h2 class="modal-title">Crop Image</h2>
</div>
<div class="modal-body">
  <div style="width: {{ width }}px; height: {{ height }}px; margin: 0 auto;">
    <ui-cropper image="image" area-type="rectangle" result-image="croppedImg"></ui-cropper>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-md btn-gray" ng-click="cancel()">
    Cancel
  </button>
  <button class="btn btn-md btn-orange" ng-click="cropImage()">
    Ok
  </button>
</div>

Looking forward to your reply.
Thanks!

Webjars packaging

Can you package this library in the Webjars format?

When I change the ratio does not apply init-max-size

Hi!
I change the ratio dynamically, but the crop is left in its minimum size and does not apply the maximum size.
http://codepen.io/anon/pen/xdLWea
Any ideas how I can solve it?

Thanks!

IE 11: InvalidStateError

Hi!
I've been trying to figure out this issue on IE11:

SCRIPT5022: InvalidStateError
ui-cropper.js (1,1)

The code I use is this:

<ui-cropper
  chargement="loading"
  area-init-size="{w: 400, h: 300}"
  max-canvas-dimensions="$ctrl.dimensions"
  area-type="rectangle"
  aspect-ratio="4/3"
  canvas-scalemode="full-width"
  image="$ctrl.cropImage"
  result-image="$ctrl.resultImage"
  result-image-size="'max'"
  result-blob="$ctrl.dataUrl"
>
</ui-cropper>

The error happens the moment the canvas is set to visible.
I could not figure out what's wrong, any ideas?

Unable to crop white image area

I was trying to crop image with white area with no colored pixels. it shows an error in Console tab of Inspect element.

ui-cropper.js:3626 Uncaught TypeError: Cannot read property '0' of null
at ColorThief.getColor (ui-cropper.js:3626)
at Image.imageDC.onload (ui-cropper.js:2982)

while I drag selection to extend or reduce cropping area it throws an error in console section.

Possible to set areaCoords?

Is there a way to set the areaCoords onto a loaded image based on values for x, y, w, & h?

Currently, I can get the areaCoords values to be saved in the DB. When the user reloads the image, the cropped area should be preserved and want to set the same areaCoords from before.

I was not able to figure out how to do this in the current release.

IE10 & IE11 InvalidStateError

This is a follow up of this question: CrackerakiUA/ngImgCropFullExtended#183

I confirm the same issue with IE10 and IE11 (on windows 7), on the same line. Setting the response type after opening the request seems to fix the issue. More informations on this problem:

http://stackoverflow.com/questions/20760635/why-does-setting-xmlhttprequest-responsetype-before-calling-open-throw
https://connect.microsoft.com/IE/feedback/details/795580/ie11-xmlhttprequest-incorrectly-throws-invalidstateerror-when-setting-responsetype

Crop the image without the UI

Hello!

Is there a way to crop the image automatically without showing the crop window? I cant find anything in the docs or source.

This would be usefull for example when you crop the images automatically on upload and have an edit button to show a UI for cropping.

I hope I make sense.

white image issue

Hello,
I have a problem in using your library if I select a white part of the image, I got the following error:
Uncaught TypeError: Cannot read property '0' of null
at ColorThief.getColor (ui-cropper.js:3595)
at Image.imageDC.onload (ui-cropper.js:2949)

Thanks,

Configuration Options

It would be great to be able to pass configuration from scope object, like aspect-ratio, result-image-size, area-type, result-image-format, result-image-quality, etc...

thanks

How to fix only width on result image?

I would like to get a result image with dimensions 1024 x Y.
Using result-image-size I can fix both dimensions, but I would like to allow resizing of the crop area, while always resizing the image to 1024px width and maintaining aspect ratio.

Wiki still shows old img-crop tags.

The wiki still shows <img-crop> tags, should be adjusted to <ui-cropper>

https://github.com/CrackerakiUA/ui-cropper/wiki/Options

New feature: ellipse crop

I don't know where to put this, so I just write here.

I'd like to see this directive be able to crop an image into an ellipse shap.

Thanks

Inconsistent Image Result Sizes

Hello @CrackerakiUA I have been having inconsistent issues with your library. This is literally amazing by the way. But as you can see in the codepen. Everything is set to 1:1 and the result dimensions are 1:1 yet the result image is not 1:1
I'm sure the issue is coming down to it being responsive, but.... shouldn't it be able to support responsiveness? The larger the image, the more pixels it is off by.

https://codepen.io/anon/pen/MOYOow

CSS is broken and points to old cropper

CSS is broken and still point to the old directive (img-crop) to CSS is broken and still points to the old directive (img-crop)

jpg to png cropped : image color change bug

Hi,

When i try to crop a white jpg (#FFFFFF) to png,
that return me a light pink png(#FFFEFF).

When i crop without ratio that's ok (return png with the right color #FFFFFF).

I try in demo version of ui-cropper and same issue.

How to upload the cropped image

I have used your crop code in my project, cropping image is showing fine. But how to upload the cropped image via api?

How to pass crop image in form ?
Please help!

Gulp build html parser

Hello I am getting this error on gulp build
at new HTMLParser (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/html-minifier/src/htmlparser.js:236:13) at minify (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/html-minifier/src/htmlminifier.js:861:3) at Object.exports.minify (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/html-minifier/src/htmlminifier.js:1216:10) at objectAssign.fileName (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/gulp-htmlmin/index.js:22:39) at module.exports (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/tryit/tryit.js:8:9) at minifyHtml (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/gulp-htmlmin/index.js:21:9) at Transform.htmlminTransform [as _transform] (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/gulp-htmlmin/index.js:51:7) at Transform._read (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/readable-stream/lib/_stream_transform.js:159:10) at Transform._write (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/readable-stream/lib/_stream_transform.js:147:83) at doWrite (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/readable-stream/lib/_stream_writable.js:338:64) at writeOrBuffer (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/readable-stream/lib/_stream_writable.js:327:5) at Transform.Writable.write (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/readable-stream/lib/_stream_writable.js:264:11) at write (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24) at flow (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7) at DestroyableTransform.pipeOnReadable (/home/jonathan/projects/consvita/agronomico/agro-ui/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5) at emitNone (events.js:67:13) at DestroyableTransform.emit (events.js:166:7)

"Init Url Crop" demo doesn't work with other pictures

Hi there!

The Init Url Crop demo on codepen seems to be broken in some way.

When I change the init url to
$scope.myImage = 'http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg'; the image is no longer loaded.

This error seems to occur with other pictures as well.

Thanks for your help!

Meteor Package unavailable

Not a show stopper, the npm package works just fine! But the mentioned meteor package does not exist on atmospherejs.com

area rectangle ratio

Hi, I would like to set the default area to 270*70px, here is my settings:

<ui-cropper image="myImage" area-type="rectangle" aspect-ratio="3.85" result-image="myCroppedImage" result-image-size='{w: 270,h: 70}' area-init-size='{w: 270,h: 70}' init-max-area="true"></ui-cropper>

When I upload a png with that ratio (270x70), the canvas size is 385x100, is it possible to import my image in a crop area of max 270x70 ?

Thanks !

result-image-format doesn't work

Option "result-image-format" doesn't work. You can set this option to "image/jpeg" and even choose original image in jpeg format for cropping, but while you upload cropped image to server you can see that Content-Type is image/png, not image/jpeg!

Unable to un-set aspect-ratio after it has been set

I need to be able to switch, on the fly, between cropping to an aspect ratio and cropping to any size.

After an aspect ratio has been specified, it cannot be removed (only replaced).

Steps to reproduce:

1. Specify an aspect ratio
2. Specify an aspect ratio of null
   Expected results:
   Cropping loop is no longer locked to aspect ratio
   Actual results:
   Cropping loop is locked to aspect ratio

It looks like the line which causes this is: https://github.com/CrackerakiUA/ui-cropper/blob/master/source/js/ui-cropper.js#L294
Likely https://github.com/CrackerakiUA/ui-cropper/blob/master/source/js/classes/crop-host.js#L844 would need to be modified to support un-setting an aspect ratio in the case when it gets passed null.