離子照片上傳 - 文件到Base64字符串

Question

我正在研究與Rails API進行通信的Ionic應用程序。我有用戶，用戶有圖片。我已經能夠遵循this guide關於如何允許用戶從他們的手機圖像本地抓取圖像。

這允許用戶從他們的電話

$ionicPlatform.ready(function() { 
$scope.getImageSaveContact = function() { 
// Image picker will load images according to these settings 
    var options = { 
    maximumImagesCount: 1, 
    width: 800, 
    height: 800, 
    quality: 80 
    }; 

    $cordovaImagePicker.getPictures(options).then(function (results) { 
    // Loop through acquired images 
    for (var i = 0; i < results.length; i++) { 
     $scope.collection.selectedImage = results[i]; // We loading only one image so we can use it like this 

     window.plugins.Base64.encodeFile($scope.collection.selectedImage, function(base64){ // Encode URI to Base64 needed for contacts plugin 
     $scope.collection.selectedImage = base64; 
     }); 
    } 
    console.log("results"); 
    console.log(results); 
    }, function(error) { 
    console.log('Error: ' + JSON.stringify(error)); 
    }); 
}; 
}); 

問題是抓取的圖像，它不運行（或似乎不是沒有運行）的window.plugins.Base64.encodeFile線編碼的文件。現在，它只是圖像文件而不是Base64編碼的字符串。

我如何獲得這個功能來運行，我從我的設備攝像頭抓起文件後？

我能弄明白，回答以下

Answer 1

我能夠拼湊一堆東西，尤其是W /鋼軌側摸不着頭腦。這個想法是點擊一個按鈕來獲取圖像，從相機膠捲中選擇一個，將該圖像轉換爲base64字符串，然後將該圖像發送到服務器。

我的當前堆棧是軌道4，離子/角V1。希望這可以幫助別人。

角控制器

function toDataUrl(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.onload = function() { 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
     callback(reader.result); 
     } 
     reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.responseType = 'blob'; 
    xhr.send(); 
    } 

    $scope.grabImage = function() { 
    var options = { 
     maximumImagesCount: 1, 
     width: 800, 
     height: 800, 
     quality: 80 
    }; 

    $cordovaImagePicker.getPictures(options).then(function (results) { 
     $scope.dataImg = results; 

     return toDataUrl($scope.dataImg, function(base64Img) { 
     $scope.base64 = base64Img; 
     $state.go($state.current, {}, {reload: false}); 
     }) 
    }, function(error) { 
     $scope.message = "Error: Failed to Attach Image"; 

     var alertPopup = $ionicPopup.alert({ 
     title: 'User Photos', 
     templateUrl: 'templates/modals/success_or_error.html', 
     scope: $scope 
     }); 
    }); 
    } 

軌控制器

def create 
    image = Paperclip.io_adapters.for(params[:image_file]) 
    image.class.class_eval { attr_accessor :original_filename, :content_type } 
    image.original_filename = "mu_#{@current_mobile_user.id}_#{@current_mobile_user.pictures.count}.jpg" 
    image.content_type = "image/jpeg" 
    @picture = @current_mobile_user.pictures.create(image: image, imageable_id: @current_mobile_user.id) 

    if @picture.save 
     render json: ['Picture Uploaded!'], status: :created 
    else 
     render json: [@picture.errors.full_messages.to_sentence], status: :unprocessable_entity 
    end 
    end 

Answer 2

是來自舊項目https://github.com/aaronksaunders/firebaseStorageApp/blob/master/www/js/app.js#L132

return $cordovaFile.readAsArrayBuffer(path, fileName) 
    .then(function (success) { 
     // success - get blob data 
     var imageBlob = new Blob([success], { type: "image/jpeg" }); 
    }) 

Answer 3

添加此相機插件

cordova plugin add cordova-plugin-camera 

這將返回圖像中基64默認情況下..

$scope.choosePhoto = function() { 
      $scope.myPopup.close(); 
      var options = { 
       quality: 75, 
       destinationType: Camera.DestinationType.DATA_URL, 
       sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
       allowEdit: true, 
       encodingType: Camera.EncodingType.JPEG, 
       targetWidth: 300, 
       targetHeight: 300, 
       popoverOptions: CameraPopoverOptions, 
       saveToPhotoAlbum: false 
      }; 
      $cordovaCamera.getPicture(options).then(function (imageData) { 
       $scope.imgURI = "data:image/jpeg;base64," + imageData; 

      }, function (err) { 
       // An error occured. Show a message to the user 
      }); 
     } 

更多的細節可以在這裏 http://ngcordova.com/docs/plugins/camera/

希望這有助於發現...