离子照片上传 - 文件到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/

希望这有助于发现...