2016-05-25 9 views
1

私はcordovaモバイルアプリケーションで作業しています。サーバーにImageをアップロードする必要があります。私は私のwebapiにbase64の文字列を送信したいと私は画像にBase64を変換し、サーバー上の画像を保存することができます。私は

$scope.takePicture = function() { 
     var options = { 
      quality: 75, 
      destinationType: Camera.DestinationType.DATA_URL, 
      sourceType: Camera.PictureSourceType.CAMERA, 
      allowEdit: true, 
      encodingType: Camera.EncodingType.JPEG, 
      targetWidth: 100, 
      targetHeight: 100, 
      popoverOptions: CameraPopoverOptions, 
      saveToPhotoAlbum: false, 
      correctOrientation: true 
     }; 
     $cordovaCamera.getPicture(options).then(function (imageData) { 
      console.clear(); 
      console.log(imageData); 
      $scope.imgURI = imageData; 
      $rootScope.ByteData = "data:image/jpeg;base64," + imageData; 
     }, function (err) { 
      var alertPopup = $ionicPopup.alert({ 
       title: 'Invalid Image', 
       template: 'Please upload correct formated image!' 
      }); 
     }); 
    } 

としてコントローラにこの$ cordovaCameraをしています。しかし、私はこのコードを実行するたびに、私はのように、特定のURLの形式でに画像データを得た「ブロブ:%3A // localhostの%3A4400/f6c7fc38-a18f-のhttp 484e-94d1-a52bb4e5fee2 "、このシナリオではどのようにしてbase64の正しい文字列を取得できますか?私の見解では、私は実際に私は、base64文字列にそのブロブ画像のURLのタイプを変換したい

<ion-view view-title="{{application.CompanyName}}"> 
    <ion-nav-buttons side="primary"> 
     <button class="button" ng-click="saveApplication()"> 
      SAVE 
     </button> 
     <button class="button" ng-click="goBack()"> 
      BACK 
     </button> 
    </ion-nav-buttons> 
    <ion-content ng-controller="AppDetailCtrl"> 
     <img ng-show="imgURI !== undefined" width="343px" height="300px" ng-src="{{imgURI}}"> 
     <img ng-show="imgURI === undefined" width="343px" height="300px" ng-src="http://placehold.it/300x300"> 
     <button class="button" ng-click="takePicture()">Upload Picture</button> 
    </ion-content> 

</ion-view> 
+0

カメラプラグインのバージョンは、使用しているような変換の怒鳴る方法がありませんでした?あなたはどのデバイスをテストしていますか? –

+0

私はビジュアルスタジオで2.2.0バージョンのcordova-plugin-cameraをテストしています –

+0

デモを作成しましたが、ここで問題を再現できません。この問題を再現できるデモを投稿できますか?どのターゲットデバイスを使用していますか? –

答えて

2

のようにやっていると私は

function convertImgToBase64(url, callback, outputFormat) { 
       var canvas = document.createElement('CANVAS'), 
        ctx = canvas.getContext('2d'), 
        img = new Image; 
       img.crossOrigin = 'Anonymous'; 
       img.onload = function() { 
        var dataURL; 
        canvas.height = img.height; 
        canvas.width = img.width; 
        ctx.drawImage(img, 0, 0); 
        dataURL = canvas.toDataURL(outputFormat); 
        callback.call(this, dataURL); 
        canvas = null; 
       }; 
       img.src = url; 
      } 
      convertImgToBase64(imageData, function (base64Img) { 
       $rootScope.ByteData = base64Img; 
      });