ng img crop - обрезка существующих изображений

Question

ng-img-crop - удивительная директива, однако мне трудно адаптировать ее к моему сценарию. Моя проблема в том, что, когда у пользователя есть изображение, я хотел бы дать им возможность изменять размер изображения, если захочет.

Так вот код, который я пытаюсь использовать:

ЯШ:

vm.userImageOriginal = vm.editUser.image_pkey ? 'api/file/' + vm.editUser.image_pkey : null; 

HTML:

<img-crop image="profileVM.userImageOriginal" result-image="profileVM.userImageNew" 
              area-type="square" result-image-size="300" on-change="profileVM.imageCropped = true;"></img-crop> 

Так что я два выпуска:

1) Я только хотите загрузить новое изображение, если пользователь действительно изменил обрезку. Я попытался установить флаг в on-change, но похоже, что on-change выполняется и при инициализации. Есть ли способ узнать, действительно ли пользователь обрезал?

2) Есть ли способ установить положение квадрата/круга. В моем сценарии, если есть существующий образ пользователя, я хотел бы установить квадрат обрезки на размеры текущего изображения (то есть на границе изображения).

Заранее спасибо.

Answer 1

решаемые так:

Добавьте следующий атрибут нг-IMG-кроп директиву в HTML:

on-load-done="profileVM.addCroppingWatcher()" 

Вот функция:

function addCroppingWatcher(){ 
      if (croppingWatcher) 
       return; 

      $window.setTimeout(function(){ 
       croppingWatcher = $scope.$watch(
        function(){ return vm.userImageNew; }, 
        function(newVal, oldVal){ 
         if (oldVal && oldVal != newVal) { 
          vm.imageCropped = true; 
          croppingWatcher(); 
         } 
        } 
       ); 
      }, 0); 
     }