Change image source about angular-image-cropper HOT 9 CLOSED

The same for me. image-url changes its value but this doesn't affect an img inside directive.

from angular-image-cropper.

Hi,
This is working for me

Controller

vm.imageUrl = null;
var handleFileSelect = function(evt) {
    var file = evt.currentTarget.files[0];
    var reader = new FileReader();
    reader.onload = function (evt) {
        $scope.$apply(function($scope){
            vm.imageUrl=evt.target.result;
        });
    };
    reader.readAsDataURL(file);
};
var cleanFileSelect = function(evt) {
    vm.imageUrl = null;
    angular.element(document.querySelector('#fileInput')).value = "";
}
angular.element(document.querySelector('#fileInput')).on('click',cleanFileSelect);
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);

View

<input accept="image/*" type="file" id="fileInput"  class="margin-top form-control" />
<image-cropper image-url="{{vm.imageUrl}}"
    width="640"
    height="480"
    show-controls="{{vm.showControls}}"
    fit-on-init="false"
    center-on-init="true"
    api="vm.cropperApi"
    crop-callback="vm.updateResultImage"
    action-labels="vm.myButtonLabels"
    ng-if="vm.imageUrl"
></image-cropper>

from angular-image-cropper.

hey @bcabanes Benjamin I'm working on using this cropper with ng-image-upload to allow custom uploads and editing if the image. It seems like loading the uploaded image into imageUrl dynamically doesn't change the image.

Wondering the priority of this fix, would really love to use this but can't right now.

from angular-image-cropper.

Hi @ryanmarshall,
This is on my todo list but i can't get the time to do it right now. I will look into this as soon as I can.

from angular-image-cropper.

Hi,

I done like this below,

in Controller

$scope.fileChanged = function(event) {
        $scope.imageURL = undefined;
        $scope.file = event.target.files[0];
        $scope.file.convertToBase64(function(base64){
           $scope.imageURL = base64;
           $scope.$apply(); 
        })
    };

in html added simple-change directive

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

<input type="file" simple-change="fileChanged($event)" accept="image/*">

Directive

.directive('simpleChange', function simpleChangeDirective() {
  return {
    restrict: 'A',
    link: function(scope, el, attrs) {
      if (!attrs.simpleChange) {
        return;
      }

      el.on('change', function(e) {
        scope.$apply(function() {
          scope.$eval(attrs.simpleChange, {
            $event: e
          });
        });
      });
    }
  };
});

And its worked for me..

from angular-image-cropper.

Hi @sureshkoduri ,

I have put your stuff, but it's error in Controler: $scope.file.convertToBase64 (not a function)

Thanks

from angular-image-cropper.

@chhumsina , Please put the below code in your app.config

File.prototype.convertToBase64 = function(callback){
            var reader = new FileReader();
            reader.onload = function(e) {
                 callback(e.target.result)
            };
            reader.onerror = function(e) {
                 callback(null);
            };        
            reader.readAsDataURL(this);
    };

from angular-image-cropper.

None of them them worked for me.

Are you planing to add image change function.

And is it possible for someone add a plunker.

Thanks

from angular-image-cropper.

Hi,
#45 fix the bug for me.

from angular-image-cropper.