result-image not working about ngimgcrop HOT 23 CLOSED

Actually what solved it for me was making sure image and result-image were not set directly on the $scope object.

So instead of:

$scope.image = '';
$scope.croppedImage = '';

I used:

$scope.image = {
   originalImage: '',
   croppedImage: ''
};

Then updated my directive to:

<img-crop
   image="image.originalImage"
   result-image="image.croppedImage"></img-crop>

And that seemed to resolve the problem. I think it is something to do with the way angular treats string values assigned to $scope by value rather than by reference.

from ngimgcrop.

@TrkiSF2 Can you provide a demo of the issue on JSFiddle?

from ngimgcrop.

in my case it's not working on safari and firefox but working on chrome
im using a mac and agular version is 1.2.26(latest) please help

from ngimgcrop.

Guys, please provide demo pages so that the problem could be reproduced. Otherwise it's impossible to find what causes it and solve the problem. Thank you.

from ngimgcrop.

Same issue here. Works in the same case with JSFiddle but not in my controller. 'image' works, when I bind it to a scope variable and then add the scope variable as an ng-src of an tag, but result-image is always blank.

Looked promising, but I'm afraid this is a deal breaker.

from ngimgcrop.

UI's modal scope messes with the img-crop directive's scope. In updateResultImage() there is a check for if(angular.isDefined(scope.resultImage)) and it is false. I overcame this by opening the modal with a scope that contains "resultImage" (value doesn't matter, as long as it's defined) like this:

$modal.open({
   scope: angular.extend($rootScope.$new(), {
      resultImage: ''
   })
});

or even simpler, if you use a controller for the modal, set $scope.resultImage = '' in it.

from ngimgcrop.

All that is a workaround yes. But to have it not work with something as standard as UI is an alarm bell. 

We already switched to jQuery's cropper and wrote a custom directive around it which works really well. In any production situation, these workarounds can give me sleepless nights. 

—
Best,

Ashesh Ambasta

On Sun, Jan 4, 2015 at 4:52 PM, Gabriel Axel [email protected]
wrote:

UI's modal scope messes with the img-crop directive's scope. In updateResultImage() there is a check for if(angular.isDefined(scope.resultImage)) and it is false. I overcame this by opening the modal with a scope that contains "resultImage" (value doesn't matter, as long as it's defined) like this:

$modal.open({
   scope: angular.extend($rootScope.$new(), {
      resultImage: ''
   })
});

---

Reply to this email directly or view it on GitHub:
#18 (comment)

from ngimgcrop.

I have the same problem even with:

$modal.open({
   scope: angular.extend($rootScope.$new(), {
      resultImage: ''
   })
});

I just can not understand why bidirectional bind variable: result-image is not updated inside my controller. Inside updateResultImage() is updated. But the value of my corresponding variable in controller is not. I tryed to use callback onChange. The call back is called but instead of result image i get undefinde. Futher more i tryed to define my own call back on the directive imgCrop and pass the value of the result image inside it. How ever the result is the same - the call back called but i get undefined as argument. Even more i tryed just to pass strign literal to the callback - still get undefined. Sorry i can not reproduce this problem. This problem is reproduced only in my development env.

from ngimgcrop.

I have the exact same problem described by rocketmannot. Has anyone managed to resolve this?

from ngimgcrop.

Update: I managed to resolve this by setting change-on-fly="true".

See below:

<img-crop
   image="imageData"
   result-image="croppedImage"
   area-type="square"
   result-image-format="image/png"
   result-image-size="60"
   result-image-quality="0.6"
   change-on-fly="true"></img-crop>

from ngimgcrop.

Yo @asheshambasta! Can you share the directive or a little sample of the one you did with Cropper? Pls

from ngimgcrop.

@alexk111 i want to disable the resize property of the croping tool. actually i need a fixed width and height for the croper.Please help me out on this.

from ngimgcrop.

@adriantadros Excellent!!!

I had the same issue, the solution is simple and works flawlessly, this should be mentioned in the documentation (README).

from ngimgcrop.

@adriantadros comment worked for me, thanks!

from ngimgcrop.

@adriantadros Solved. Simple solution. Thank you!

from ngimgcrop.

@adriantadros It really helps! Thank you!

from ngimgcrop.

@lechengyu Can you paste the full code?

from ngimgcrop.

here is what I did in case anyone needs a cleaner solution without any workarounds

angular.module('poch').directive('addprofile',function(){
return{
        restrict: 'E',
        templateUrl: 'client/modules/add-profile-details/add-profile.html',
        controllerAs: 'addProfileController',
        controller: function($scope,$reactive){
            var vm = this;
            $reactive(this).attach($scope);
            this.helpers({
                imgSrc: function(){
                  return undefined;
                },
                image: function(){
                    return {
                        originalImage: undefined,
                        croppedImage: undefined
                    };
                }
            });
            this.addAvatar = function(files){
                if (files.length > 0) {
                    var reader = new FileReader();
                    reader.onload = function(e){
                        $scope.$apply(function(){
                            vm.image.originalImage = e.target.result;
                        });
                    };
                    reader.readAsDataURL(files[0]);
                }
                else {
                    this.image.originalImage = undefined;
                }
            };
            this.saveAvatar = function(){
                this.imgSrc = this.image.croppedImage;
                this.image.originalImage = undefined;
            }
        }
    }
});

from ngimgcrop.

@adriantadros Thank you mate!

from ngimgcrop.

@adriantadros Thank you man, it work for me!

from ngimgcrop.

Nothing is working for me :(

from ngimgcrop.

@kabrice try this (forget the part of ngFileUpload)

from ngimgcrop.

@ignj thanks for posting the fiddle awesome stuff,can you please post and example sending the image with form field aswell

from ngimgcrop.