ion＆cordova cropping image然後上傳

在通過cordova camera插件拍攝照片並顯示在html中後，我想要用戶選擇是否對其進行編輯（裁剪，設置寬高比，調整大小）或者按照原樣上傳。ion＆cordova cropping image然後上傳

有沒有辦法做到這一點？

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 
     });                        
    });                 
}

來源

2017-01-18 Amr.Ayoub

但你有，allowEdit爲你做。拍攝照片後，您將看到一個編輯屏幕，裁剪並確認 - >您會收到裁剪後的圖像 – Marko

我需要裁剪整個JavaScript功能，允許編輯將本機裁剪應用程序放在手機上 –

我想給用戶拍攝照片後的選擇，而不是強制選擇他。 –

嘗試使用Camera.DestinationType.FILE_URL，響應將是一個網址，你可以通過它直接通過鏈接直接NG-SRC。對於你的代碼，你的「imageURI」實際上是一個帶有base64字符串的圖像字符串。

來源

2017-01-18 19:55:27

我已經找到這個圖書館，任何想法如何使用我的代碼https://github.com/fengyuanchen/cropperjs –

通過涼亭安裝cropperjs。閱讀官方文檔並遵循它。它應該非常簡單易用。 –

ion＆cordova cropping image然後上傳

回答

相關問題