Cordova Bildauswahl zu base64 konvertieren

Ich habe Probleme beim konvertieren einer Bilddatei in das base64-format, das ausgewählt wurde mit der ngCordova imagePicker.

Dinge einfach zu halten, den code auf der Cordova-Seite (die funktioniert), ist dies:

module.controller('ThisCtrl', function($scope, $cordovaImagePicker) {

  var options = {
   maximumImagesCount: 10,
   width: 800,
   height: 800,
   quality: 80
  };

  $cordovaImagePicker.getPictures(options)
    .then(function (results) {
     for (var i = 0; i < results.length; i++) {
    console.log('Image URI: ' + results[i]);
  }
}, function(error) {
  //error getting photos
});
});

Den Ergebnissen array liefert ein array mit Ergebnissen wie: file///... aber wie konvertieren von hier? Ich möchte eine Funktion, die Sie übergeben einen Wert zu (die Datei) und gibt die base64-string.

Hier ist eine Funktion, die versucht, dieses:

function convertImgToBase64URL(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(dataURL);
            canvas = null; 
        };
        img.src = url;
    };

Aber wie integriert man es in den code?

Habe ich versucht, diese (müssen nur wählen ein Bild):

$cordovaImagePicker.getPictures(options)
                .then(function (results) {
                    convertImgToBase64URL(results[0], function(base64Img){

                        self.chosenImage = base64Img;                                
                    });                          

             }, function(error) {
                console.log(error);
             });

aber selbst.chosenImage festgelegt wird, zu leeren.

Könnte ein async-Problem, aber wie am besten zu lösen?

InformationsquelleAutor Robert Austin | 2015-04-05
  1. 10

    Konnte verwenden Sie $cordovaCamera und ändern Sie die sourceType auf der Kamera.PictureSourceType.PHOTOLIBRARY ?

    document.addEventListener("deviceready", function () {

    var options = {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
      allowEdit: true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 100,
      targetHeight: 100,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      //error
    });

  }, false);
    • Dies funktioniert gut und IMO, sollte die richtige Antwort
    • Toll, ich diese Arbeit mit nur ein Bild wählen?
    InformationsquelleAutor Will Graham
  2. 2

    Interessant, die ngCordova ImagePicker nicht die Funktion so konvertieren Sie ein Bild in base64. Jedoch, die ngCordova $cordovaCamera-Funktion funktioniert, wenn auch nur für sofort aufgenommene Fotos.

    Hier die gleichwertige Option wäre 

     var options = {
  quality: 80,
  destinationType: Camera.DestinationType.DATA_URL,
  sourceType: Camera.PictureSourceType.CAMERA,
  allowEdit: true,
  encodingType: Camera.EncodingType.JPEG,
  targetWidth: 800,
  targetHeight: 800,
  popoverOptions: CameraPopoverOptions,
  saveToPhotoAlbum: false
};

    Quelle: http://ngcordova.com/docs/plugins/camera/

    InformationsquelleAutor Galvin Widjaja
  3. 1

    Dies ist eine alte Frage, aber ich denke, die wichtigsten Anfrage nicht beantwortet, obwohl der alternative Vorschlag ist toll.
    Also nur darauf hinweisen, eine Methode, die folgt dem vorgeschlagenen Weg, so könnten Sie Base64-plugin.

    Installieren Sie es wie gewohnt

    cordova plugin add https://github.com/hazemhagrass/phonegap-base64

    und verwenden Sie es innerhalb der $cordovaImagePicker.getPictures Erfolgs-callback

    $cordovaImagePicker.getPictures(options)
        .then(function (results) {
            for (var i = 0; i < results.length; i++) {
                console.log('Image URI: ' + results[i]);
                $scope.imageUri = results[i];

               //Encode URI to Base64
               window.plugins.Base64.encodeFile($scope.imageUri, function(base64){
                  //Save images in Base64
                  $scope.images.push(base64);
               });
            }

        }, function(error) {
            //error getting photos
        });
    • Guter Vorschlag .. versucht aber hat nicht funktioniert.. ich bin mit cordova v6
    InformationsquelleAutor guillermogfer
  4. 0

    Wenn Sie wollen einfach nur die übertragung von Bild, um zu dienen, hast du das nicht tun.
    Sie können fileTransferPlugin.
    Hoffe, das wird hepl Sie.

    InformationsquelleAutor Pied Piper
Schreibe einen Kommentar