Предварительный просмотр загрузки ngImgCrop не показывает никаких изображений в модальном

Question

В настоящее время я работаю с ngImgCrop, чтобы обеспечить предварительный просмотр (и квадратный обрез) изображений профиля.

К сожалению, ни предварительный просмотр изображения, ни обрезка не отображаются.

'use strict'; 
 

 
function UserProfileCtrl($scope, $stateParams, UserService, $modal) { 
 
    var handleFileSelect = function(evt) { 
 
     var file = evt.currentTarget.files[0]; 
 
     var reader = new FileReader(); 
 
     reader.onload = function (evt) { 
 
      $scope.$apply(function($scope){ 
 
       var modalInstance = $modal.open({ 
 
        templateUrl: '/panel/views/User/image.html', 
 
        size: 'lg', 
 
        controller: UserImageCtrl, 
 
        resolve: { 
 
         loadPlugin: function ($ocLazyLoad) { 
 
          return $ocLazyLoad.load([ 
 
           { 
 
            name: 'ngImgCrop', 
 
            files: [ 
 
             '/panel/js/plugins/ngImgCrop/ng-img-crop.js', 
 
             '/panel/css/plugins/ngImgCrop/ng-img-crop.css' 
 
            ] 
 
           } 
 
          ]); 
 
         }, 
 
         image: function() { 
 
          return evt.target.result; 
 
         } 
 
        } 
 
       }); 
 
      }); 
 
     }; 
 
     reader.readAsDataURL(file); 
 
    }; 
 
    angular.element(document.querySelector('#new_image')).on('change',handleFileSelect); 
 
}

'use strict'; 
 

 
function UserImageCtrl($scope, $modalInstance, image) { 
 
    console.log(image); 
 
    $scope.image_start = image; 
 
    $scope.image_cropped = ''; 
 

 
    $scope.submit = function() { 
 
     
 
    }; 
 

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

console.log выход код IMG Base64.

<div class="modal-body"> 
 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
       <div class="cropArea"> 
 
        <img-crop area-type="square" image="image_start" result-image="image_cropped"></img-crop> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-md-6"> 
 
       <h4>Preview image</h4> 
 
       <div class="m-b-md"><img ng-src="{{image_cropped}}" /></div> 
 
      </div> 
 
     </div> 
 
    </div>

зрения Chrome развития: DOM View Network view

Благодарим Вас за помощь заранее.

Answer 1

У меня была аналогичная проблема. Если вы можете вызвать событие area-move, он всегда будет смотреть на родительские элементы и соответственно изменить размер. Итак, вот что вам нужно сделать, чтобы вызвать это событие.

нг-IMG-растениеводство предоставляет сервис под названием cropPubSub, что вы можете привнести в ваш контроллер

.conroller('someCtrl', function($scope, cropPubSub){...} 

тогда, когда ваш модальный открыт, вы можете вызвать инициирующее событие, которое должно смотреть на родительских элементов ширину и высоту, и соответственно измените размер изображения. Так что для моего примера я назвал функцию, чтобы открыть модальную

$scope.callModal = function(val){ 
    if(val){ 
     $('#cropImgModal').modal('show'); 
     var myEvent = new cropPubSub(); 
     $timeout(function(){ 
      myEvent.trigger('area-move'); 
     },200); // 200 seconds was about right for me for the modal to be fully open 
    } 
}; 

Надеется, что это помогает кто-то