Ionic Photo Upload - Datei zu Base64 String

Question

Ich arbeite an einer Ionic App, die mit einer Rails API kommuniziert. Ich habe Benutzer und Benutzer haben Bilder. Ich war in der Lage, this guide zu folgen, wie man Benutzern erlaubt, Bilder nativ von ihren Telefonbildern zu ergreifen.

Dies ermöglicht dem Benutzer, ein Bild von ihrem Telefon zu greifen

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

Das Problem ist, ist es nicht in Betrieb ist (oder wird nicht nicht ausgeführt werden), um die window.plugins.Base64.encodeFile Linie, die eine Datei kodiert. Im Moment ist es nur die Image-Datei und nicht die Base64-codierte Zeichenfolge.

Wie kann ich diese Funktion ausführen, nachdem ich eine Datei von meiner Gerätekamera gegriffen habe?

ich war in der Lage, es herauszufinden, Antwort unten

Answer 1

ich in der Lage war, ein paar Sachen zusammen vor allem durch Ansetzen, um herauszufinden, w/die Schienen Seite. Die Idee besteht darin, auf eine Schaltfläche zu klicken, um ein Bild zu erhalten, eines aus Ihrer Kamerarolle auszuwählen, dieses Bild in eine Base64-Zeichenkette umzuwandeln und dieses Bild dann an den Server zu senden.

Mein aktueller Stapel ist Schienen 4, ionic/angular v1. hoffentlich hilft das jemand anderem.

Winkelregler

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

Schienen-Controller

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

aus einem alten Projekt https://github.com/aaronksaunders/firebaseStorageApp/blob/master/www/js/app.js#L132 Plugin

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

Answer 3

fügen diese Kamera

cordova plugin add cordova-plugin-camera 

dieses kehrt Bild in 64 Base standardmäßig.

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

weitere Details finden Sie hier http://ngcordova.com/docs/plugins/camera/

Hoffnung zu finden, das hilft ...