0

После того, как вы сделали снимок через плагин камеры камеры и отображали его в html, я хочу, чтобы у пользователя был выбор: отредактировать его (обрезать, установить соотношение сторон, изменить его размер) или загрузите его как есть.ionic & cordova обрезать изображение, а затем загрузить его

Есть ли способ сделать это?

HTML

<ion-header-bar class="bar-assertive"> 
    <h1 class="title">Photos</h1> 
</ion-header-bar> 
<ion-content ng-controller="ImgCtrl" padding="true"> 
    <button class="button button-full button-assertive" ng-click="takePhoto()"> Take Photo </button>  
    <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" style="text-align: center"> 
</ion-content> 

Javascript

$scope.takePhoto = function() {                   
    var options = {                     
     quality: 75, 
      destinationType: Camera.DestinationType.DATA_URL, 
      sourceType: Camera.PictureSourceType.CAMERA, 
      allowEdit: true, 
     encodingType: Camera.EncodingType.JPEG, 
     correctOrientation: true, 
     targetWidth: 800, 
     targetHeight: 1100, 
     popoverOptions: CameraPopoverOptions, 
     saveToPhotoAlbum: false                  
    };                       
    $cordovaCamera.getPicture(options).then(function(imageData) { 
     // Saving the image for later access 
                          
     $scope.imageURI = "data:image/jpeg;base64," + imageData; 

     $ionicLoading.show({ 
      template: 'Photo taken', 
      duration: 1000 
     }); 
                         
    }, function(err) {      
     $ionicLoading.show({ 
      template: 'Error ...', 
      duration: 900 
     });                        
    });                 
} 
+0

но у вас есть, allowEdit делает это за вас. После того, как вы сделаете снимок, вы получите экран редактирования, вы обрезаете и подтвердите -> вы получите обрезанное изображение. – Marko

+0

Мне нужно обрезать функцию JavaScript. Разрешить редактирование вывести собственное приложение обрезки по телефону. –

+0

Я хочу дать пользователю выбор после фотографирования, а не для него вариант. –

ответ

0

Попробуйте использовать Camera.DestinationType.FILE_URL, ответ будет URL, и вы можете передать его непосредственно передать URL в нг-Src. Для вашего кода ваш «imageURI» на самом деле является строкой с строкой base64 изображения.

+0

Я нашел эту библиотеку, любую идею, как я могу ее использовать с моим кодом https://github.com/fengyuanchen/cropperjs –

+0

установить cropperjs через bower. Прочтите официальную документацию и следуйте ей. Он должен быть очень прост в использовании. –

Смежные вопросы