bcabanes / angular-image-cropper Goto Github PK

Hi,

I'm getting this error ever since I've upgraded to Angular v1.6.x: this.actionLabels is not a function.

I even tried the homepage demo with the new version of Angular and the same error is showing. If I revert the Angular version, the error goes away.

Any ideas what is causing this and how to fix it?

Thanks,
San

I'm trying to upload pics captured from iPhone but these are automatically rotate wrong before upload.
I upload this image captured from iPhone. This is automatically rotated.

As the title indicates, if you have an image that doesn't have the same width as it does height, calling rotateImage() causes part of the image to be cut off, since the css.left value is, in my current sample, -33.3333%. setting this.elements.image.style.left = 0 right after the transform occurs makes it so the image is no longer cut off. the side effect of this is that the image is now stretched, since it's using the image height instead of the width.

i think a check to see if width > height needs to be in this function somewhere and then depending on the outcome of that, the newWidth and newHeight values are adjusted accordingly.

I could not find this file anywhere in the repo.

Hey @bcabanes ,

I would like that the crop is initialized anytime the user takes an action ( move, rotate, etc ) so the user is not dependent on clicking the crop action.

Do you have any plans to roll this out at all ?

I implemented this already, but wondering on your thoughts if there is a better approach or should I submit a Pull Request ?

Thanks

angular-image-cropper.js
Here is what I added for it to work.

    this.elements.controls.rotateLeft.addEventListener('click', function() {
      self.applyRotation(-90);
      self.elements.controls.crop.click(); // line added
    });
    this.elements.controls.rotateRight.addEventListener('click', function() {
      self.applyRotation(90);
      self.elements.controls.crop.click(); // line added
    });
    this.elements.controls.zoomIn.addEventListener('click', function() {
      self.applyZoomIn(self.zoomInFactor);
      self.elements.controls.crop.click(); // line added
    });
    this.elements.controls.zoomOut.addEventListener('click', function() {
      self.applyZoomOut(self.zoomOutFactor);
      self.elements.controls.crop.click(); // line added
    });

And another in move function

    // Move.
    this.setOffset(left, top);

    this.elements.controls.crop.click(); // line added

Hello !

I'm looking for a way to not display rotate buttons controls can you help me ?

Maybe you can help me with another issue, i'm using ionic and i want to apply crop changes on another button located in a ion-footer. My save button call the same function but the image isn't cropped when i save :

` <ion-content>
    <ion-list>
      <ion-item>
        <div class="imgCropper_layer"></div>
        <img  ng-if="!image_cropper_url" src="{{profil.image}}" alt="" style="width: 100%; height: 300px; overflow:hidden">
        <img ng-src="imageURI" alt="" style="display: none">
        <image-cropper class="crop_container" image-url={{image_cropper_url}}
                       width="500"
                       height="300"
                       show-controls="true"
                       fit-on-init="true"
                       center-on-init="true"
                       zoom-step="0.05"
                       crop-callback="update_result_cropper_image"
                       action-labels="my_cropper_button_labels"
                       ng-if="image_cropper_url"
                       ></image-cropper>
      </ion-item>
    </ion-list>
    <div class="margin-auto text-center">
      <button class="button  button-large button-default btn-rounded" ng-click="get_photo()">{{"prendre_photo" | translate}}</button>
      <br>
      <br>
      <span class="text-center">Ou</span>
      <br>
      <input type="file" class="custom-file-input" onchange="angular.element(this).scope().setFile(this)" placeholder="." accept="image/*"/>
    </div>

  </ion-content>
  <ion-footer-bar>
    <button class="button button-block button-large button-positive " ng-click="update_result_cropper_image()">{{"sauvegarder" | translate}}</button>
  </ion-footer-bar>`

Thank you for you help !

Hi,

I'm just wondering if it would be at all possible for you to allow the cropper to work with cross origin images at all? Currently, I get the following error when trying to access an image stored in amazons3:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

I have made sure that the I have given my amazons3 bucket the required CORS rule to allow for cross origin images, however, the directive still does not work with these types of image.

Is there anything that could be done here?

Thanks

Has anyone been successful using image cropper with ng file upload?

Dynamic appending on imageUrl attribute seems not working. The image url is showing as 'undefined'.

Here's the ngf uploader and a cropper

<div type="file"
    ng-model="myfile"
    ngf-select
    ngf-drop
    ngf-model-options="{updateOn: 'change click drop dropUrl paste', debounce: 0}"
    ngf-pattern="image/*" 
    ngf-allow-dir="true">
</div>

<image-cropper 
    ng-if="myfile"
     imageUrl="{{myfile | ngfDataUrl}}"
    width="1000" height="1000"
    show-controls="true"
     fit-on-init="false"
    center-on-init="true"
    check-cross-origin="false"
    zoom-step="0.1"
    action-labels="myButtonLabelsObject">
</image-cropper>

Hi,

I was using your project from bower and there used to be a dist folder with:
angular-image-cropper.min.css
angular-image-cropper.min.js

With the update to 1.0 these files are missing.

It looks like it's just using CSS to rotate, is it possible to save it's mutated state?

It seems the directive does not get along with transparent images properly. In my case it's converting the background color to black.

Hi,
when adding new image croppers to the page, the existing image croppers zooms out if it's zoomed in.

Codepen: https://codepen.io/anon/pen/MybPwK
To reproduce the issue, zoom in the existing image cropper and then click the "Add one more" button.

Hello, the callback method is being called more than once, repeatedly sends to the server, it has happened before?

Sorry the English.

Hi,
I installed angular-image-cropper with bower and then injected it using wiredep.
Wiredep was not able to inject the .js and .css file into my application because here you have specified to add dist/angular-image-cropper.js file but it doesn't exist. Instead of this, you should have the following in the bower.json file

"main": ["./dist/angular-image-cropper.min.js, ./dist/angular-image-cropper.min.css"] 

I'am getting this exception: "Cropper: No image url given." because I'am setting the image-url after the initialization of the directive. I'am requesting to a web service an object including the URL and binding the result to the image-url attribute but when the init() is called the exception is raised.

Is there a way to initialize the directive manually?

Error: Cropper: No image url given.
at new Cropper (http://localhost/web/app/bower_components/ng-image-cropper/dist/angular-image-cropper.js:87:12)
at module.exports.angular.module.directive.controller.init (http://localhost/web/app/bower_components/ng-image-cropper/dist/angular-image-cropper.js:889:25)
at module.exports.angular.module.directive.link (http://localhost/web/app/bower_components/ng-image-cropper/dist/angular-image-cropper.js:894:23)
at http://localhost/web/app/bower_components/angular/angular.js:8211:44
at invokeLinkFn (http://localhost/web/app/bower_components/angular/angular.js:8217:9)
at nodeLinkFn (http://localhost/web/app/bower_components/angular/angular.js:7726:11)
at compositeLinkFn (http://localhost/web/app/bower_components/angular/angular.js:7075:13)
at publicLinkFn (http://localhost/web/app/bower_components/angular/angular.js:6954:30)
at boundTranscludeFn (http://localhost/web/app/bower_components/angular/angular.js:7093:16)
at controllersBoundTransclude (http://localhost/web/app/bower_components/angular/angular.js:7753:18)

hello,

Firstly, thank you for the brilliant work. I have it working in my angular application, however what are the best practices for setting the size of the Cropping canvas?

For example, if I want to allow users to crop large images to a size of 500x150. I want to display the crop tool at the size 500x150. At the moment it just fills the container.

Hello,

first to say, great work with the cropper.

But we have a big issue at the moment, since you released 1.1.8 the bower install isn't available anymore.

Overtime we try to access it by bower following exception occurs:

Server error: ENOENT: no such file or directory, lstat '/tmp/[email protected]/tmp/[email protected]/bower.zip'

Can you please fix this? It is quite urgent, cause our project is not able to build anymore.

Thanks

Florian

I detect this behavior and is more common if you are zoomed and the box is small (so you need to drag a lot).

When you drag outside the box the image stops moving. If you release the click doesnt really release it until you are inside the box and click-release again. Also when you go back to the box the image "jumps" to adjust the origin-dragging-point to the new mouse position inside the box.

I think one solution is avoiding to go outside the box when you are dragging (dunno if this is posible) so every time you release you are always inside.Or maybe if you reach some of the edges of the box force the release.

The other solution could be enable dragging outside the box (until some limit is reached) and enable releasing the mouse outside too.

Hello,

I'd just like to say thanks for the plugin - it really has helped me as I was struggling to find anything that was suitable for cropping on a mobile device and almost got ready to develop something like this myself. You've saved me a lot of time!

I have one question though (and I'm not sure it's an issue) - when I change the original image dynamically to an image which is smaller in size, some of the cropped image result is cut off and displayed as blank. I'm guessing that I need to somehow refresh the directive once the image has been changed. Is there an easy way to achieve this?

Hi @bcabanes

Is 'pinch to zoom' functionality there on the roadmap anytime soon?

Thanks!

Hello,

Does this usefull module work well with angular 1.4.* ?
I'm using 1.4.7 and no controll button is displayed. What can I do ?

If image cropper is located inside form, it submit form when clicking on cropper control buttons.
Because default button type is submit

<button>Ok</button> === <button type="submit">Ok</button>

How can I set aspect ratio so user can crop the image under that aspect ratio?

Like using an attr aspect-ratio="1.3" or api?

when i import imageCropper.js file to admin.jsp it is showing imageCropper.js:1 Uncaught ReferenceError: module is not defined error.

how to fix this error ?

Every time i try to zoomIn/Out i get this error: Uncaught TypeError: self.applyZoom is not a function

In fact in the code, there is no applyZoom function! We just have this:

Cropper.prototype.bindControls = function() {
  var self = this;  
  this.elements.controls.zoomIn.addEventListener('click', function() {
    self.applyZoom(self.zoomInFactor);
  });
  this.elements.controls.zoomOut.addEventListener('click', function() {
    self.applyZoom(self.zoomOutFactor);
  });
};

Cropper.prototype.applyZoomIn = function(zoom) {
  this.zoomImage(1 + parseFloat(zoom));
};
Cropper.prototype.applyZoomOut = function(zoom) {
  this.zoomImage(1 / ( 1 + parseFloat(zoom)));
};

Then i went on the demo page to look at the code and i saw this:

Cropper.prototype.bindControls = function() {
  var self = this;
  this.elements.controls.zoomIn.addEventListener('click', function() {
    self.applyZoom(self.zoomInFactor);
  });
  this.elements.controls.zoomOut.addEventListener('click', function() {
    self.applyZoom(self.zoomOutFactor);
  });
};

Cropper.prototype.applyZoom = function(zoom) {
  this.zoomImage(zoom);
};

This code is working, everything is fine. But where do i get this code? I tried bower, npm and git but no way to find a working version. Can you help me?

Hi, it seems like zoom-step doesn't work properly. I've tried changing it from 0.1 to 0.9, but it's always the same zoom. Browsers: Safari (v 9.0.3), Chrome Canary(v 50.0.2652.0), Firefox (v 43.0.4).

After cropping the image from tool if we compare new image with original image then the quality is very poor.

Hi,

It would a good option to export the crop as png files to preserve transparency. We can add this as an option which defaults to jpg but we can override it.

I see the code to export the crop is this:

          var base64 = canvas.toDataURL('image/jpeg');
	  this.events.triggerHandler('Cropped', base64);

We can just change it to

          var base64 = canvas.toDataURL(this.options.format); //default is still jpeg for BC
	  this.events.triggerHandler('Cropped', base64);

What do you think? Should I submit a PR?

Thanks!
San.

imageCropperDirective.js:5 Uncaught ReferenceError: module is not defined
at imageCropperDirective.js:5

It seems in order to use this you need to use javascript modules.

Hi,

I've been trying to upload an image and covert it to a base64, but when uploading another image again the cropper is not updating the image

Hi,
This looks really interesting. I would love to test it out. I'm trying to download the 0.1.0 release using bower and it looks like the version released is 0.1.0 but the version declared in the json is 0.0.1. As a result I'm not able to download it.

bower ng-image-cropper#* download https://github.com/bcabanes/angular-image-cropper/archive/v0.1.0.tar.gz
bower ng-image-cropper#* extract archive.tar.gz
bower ng-image-cropper#* mismatch Version declared in the json (0.0.1) is different than the resolved one (0.1.0)
bower ng-image-cropper#* resolved git://github.com/bcabanes/angular-image-cropper.git#0.1.0
bower angular-image-cropper#~0.1.0 ENORESTARGET No tag found that was able to satisfy ~0.1.0

In your bower.json the version is 0.0.1.

I can see this behavior on example page: http://bcabanes.github.io/angular-image-cropper/

As I understand, if image is "fit" it should be fully visible? Please advice, what I'm missing

While rotating an image (using controls), it doesn't rotate top/right/bottom/left, only top/bottom.

Exploring the directive.js file in your Dev folder of project, I have seen the directive adds classes like imgCropper-dragging so the css could change the style.
Unfortunately my version is not adding any classes.
What I wanted to achieve was to play around with css to make a blur version of image that is outside of canvas so that the user would see the rest of image that is not cropped. That was were I found out the classes you intended to add are not adding at all!!
Any help would be appreciated.

Hey bcabanes,

Great directive!

Just having some trouble with the zoom api, it doesn't seem to work for integers less than 3 (including negative numbers).

Ideally, I'd like to pass in zoom(1) or zoom(-1).

See codepen link, try playing around with the settings on the "Zoom API" button.

Codepen Link

Hi, I want to change cropper width and height dynamically and I am doing the below

<image-cropper image-url="{{imageURL}}"
                                              width="{{cropper.width}}"
                                              height="{{cropper.height}}"
                                              show-controls="true"
                                              fit-on-init="false"
                                              center-on-init="true"
                                              crop-callback="setSelectedTileBg"
                                              ng-if="imageURL"
                                            ></image-cropper>

In controller Im using

$scope.cropper = { width:$element.context.offsetWidth,height:$element.context.offsetHeight};

Any help??

Hi,

Is there any way to declase image cropper controls outside the tag??

TypeError: Cannot read property 'wrapper' of undefined
    at Cropper.remove (http://localhost:9000/bower_components/ng-image-cropper/dist/angular-image-cropper.js:297:49)

Throws error on the last line of this code:

    /**
     * Remove all DOM element parts of the Cropper.
     */
    Cropper.prototype.remove = function() {
      var elements = this.elements;
      elements.target.removeChild(elements.wrapper);
      elements.target.removeChild(elements.controls.wrapper);
    };

@bcabanes I see many issues not responded to in many months.

What's the status of any of these issues and pull requests?

Our application does not use JQuery and refers Angualrs JQlite. But the angular-image-cropper, does not work without Jquery. Can you just edit the line in the directive, where it uses angular.element('body') to angular.element(document).find('body').

This would be really great and I can use this without have to tweak it too much

Thanks

Please support "bower install" version support

bower install angular-image-cropper

Currently it updates bower.json to

"angular-image-cropper": "*"

It should update to i.e. same as package.json

"angular-image-cropper": "~1.1.5"

im using the image croper in a $uibModal template like this:
<image-cropper image-url=" promises[0].$$state.value + "
width="options.width"
height="options.height"
show-controls="true"
"it-on-init="true"
center-on-init="true"
crop-callback="updateResultLogo"
check-cross-origin="false"
zoom-step="options.zoom+""
action-labels="myButtonLabelsObject"></image-cropper>
i use the width & height dynamically bec. its possible to upload such small pictures, that a 3000*300 output div looks bad. Is it possible to change the zoom calculation depends on image size? Or to generate the zoom calculation with a separate function?

Hi,

Any thoughts on upgrading this to Angular 2?

Thanks!

hi i have implemented a range slider to zoom in & zoom out but i am not table to perfectly zoom-in & zoom-out using slider
here is what am i done so far

      this.elements.controls.zoomEr.addEventListener('change', function(e,v) {

        var newValue = e.target.value;

        if (newValue > oldValue) {
            self.applyZoom(1 + parseFloat(newValue));
        } else {
            self.applyZoom(1 - parseFloat(newValue));
        }
        oldValue = newValue;
      });

can you pls help me to get it working perfectly

Regards

I have the directive loaded with the image url on the directive bound to a property on my controller.

In my setup, a user can select the image to view, and I change the url source on my controller. However, the image does not update or reinitialize when the url changes.