Phonegap coder une image en base64

Je suis en train de coder une image en base64 et de l'envoyer à un serveur. Lorsque je récupère l'image qu'il montre est vide.

Le code que j'utilise pour coder, c'est ceci:

encodeImageUri = function(imageUri) {
        var c = document.createElement('canvas');
        var ctx = c.getContext("2d");
        var img = new Image();
        img.onload = function() {
            c.width = this.width;
            c.height = this.height;
            ctx.drawImage(img, 0, 0);
        };
        img.src = imageUri;
        var dataURL = c.toDataURL("image/jpeg");

        return dataURL.slice(22, dataURL.length);
    }

Prises à partir de: À l'aide de PhoneGap, Comment obtenir base64 données d'image de la photo choisie dans la bibliothèque photo de l'iPhone

OriginalL'auteur danielrvt-sgb | 2013-01-11

  1. 3

    J'utilise le code suivant pour convertir une image en Base64:

    var Base64 = {
    /**
     * This implementation relies on Cordova 1.5 or above implementations.
     */
    getBase64ImageFromInput : function (input, callback) {
        var imageReader = new FileReader();
        imageReader.onloadend = function (evt) {
            if (callback)
                callback(evt.target.result);
        };
        //Start the asynchronous data read.
        imageReader.readAsDataURL(input);
    },
    formatImageSrcString : function (base64) {
        return (base64.match(/(base64)/))? base64 : "data:image/jpeg;base64," + base64;
    } 
};

    Ci-dessous est un exemple d'utilisation de cet objet pour convertir une image à partir d'un fichier d'entrée pour le codage base64:

    var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.onchange = function () {
    var input = this.files[0];
    if (input) {
        Base64.getBase64ImageFromInput(input, function (imageData) {
            //Process the image string. 
            console.log(imageData);
        });
    } else {
       alert("Please select an image.");
    }
};

    Espère que cette aide. Laissez-moi savoir si vous avez des questions.

    OriginalL'auteur Zorayr

  2. 2

    L'image est en cours de chargement de manière asynchrone, ce qui signifie que votre return dataURL... arrive avant l'image est chargée dans la toile.

    Au lieu d'avoir cette fonction retourne une valeur, une fonction de rappel.

    encodeImageUri = function(imageUri, callback) {
    var c = document.createElement('canvas');
    var ctx = c.getContext("2d");
    var img = new Image();
    img.onload = function() {
        c.width = this.width;
        c.height = this.height;
        ctx.drawImage(img, 0, 0);

        if(typeof callback === 'function'){
            var dataURL = c.toDataURL("image/jpeg");
            callback(dataURL.slice(22, dataURL.length));
        }
    };
    img.src = imageUri;
}

    Vous maintenant l'appeler comme ceci:

    encodeImageUri('/path/to/image.png', function(base64){
    //Do something with the b64'd image
});

    NOTE: Pour que cela fonctionne, l'image doit être sur le même domaine que votre page.

    Cela ne fonctionne toujours pas, je reçois à la chaîne avec un tas d'
    Est l'image sur le même domaine que votre page? Êtes-vous sûr que la chaîne est mal?
    L'image est prise avec l'appareil photo du téléphone et de les stocker dans la carte sd. J'ai testé la chaîne dans cette page: freeformatter.com/base64-encoder.html et renvoie une image vide
    Je ne sais rien à propos de phonegap, mais je sais que les navigateurs n'aime pas quand vous essayez de charger des fichiers depuis le système de fichiers dans la page.

    OriginalL'auteur Rocket Hazmat

  3. 2

    Utiliser le readAsDataURL méthode de FileReader.

    Comment utiliser readAsDataUrl si il n'y a pas de documentation sur la création d'instances de FileEntry objets?
    Prendre vous imageURI et passer à la fenêtre.resloveLocalFileSystemURI qui aura un FileEntry objet en tant que paramètre à la réussite de rappel. Ensuite, vous serez en mesure d'utiliser le FileReader de lire que FileEntry.
    Je reçois ce que resloveLocalFileSystemURI est pas défini
    C'est parce que je ne peut pas taper 😉 Il doit avoir été de la fenêtre. resolveLocalFileSystemURI().

    OriginalL'auteur Simon MacDonald