encodage/décodage de l'image avec base64 sauts d'image

Je suis en train de coder et de décoder une image. Je suis l'aide de la FileReader de readAsDataURL méthode pour convertir l'image en base64. Puis de le convertir en arrière, j'ai essayé d'utiliser readAsBinaryString() et atob() avec pas de chance. Est-il un autre moyen de conserver des images sans l'encodage base64?

readAsBinaryString()

Commence à lire le contenu de la Goutte, qui peut être un
Fichier. Lorsque l'opération de lecture est terminée, la readyState deviendra
FAIT, et le onloadend rappel, le cas échéant, sera appelée. À l'
le temps, le résultat de l'attribut contient les données binaires à partir du fichier.

Une idée de ce que je fais mal?

Exemple De Code
http://jsfiddle.net/qL86Z/3/

$("#base64Button").on("click", function () {
    var file = $("#base64File")[0].files[0]
    var reader = new FileReader();

    //callback for readAsDataURL
    reader.onload = function (encodedFile) {
        console.log("reader.onload");
        var base64Image = encodedFile.srcElement.result.split("data:image/jpeg;base64,")[1];
        var blob = new Blob([base64Image],{type:"image/jpeg"});
        var reader2 = new FileReader();

        //callback for readAsBinaryString
        reader2.onloadend = function(decoded) {
            console.log("reader2.onloadend");
            console.log(decoded); //this should contain binary format of the image

            //console.log(URL.createObjectURL(decoded.binary)); //Doesn't work
        };
        reader2.readAsBinaryString(blob);

        //console.log(URL.createObjectURL(atob(base64Image))); //Doesn't work

    };
    reader.readAsDataURL(file);
    console.log(URL.createObjectURL(file)); //Works
});

Merci!

le navigateur n'cet exemple de travail? TypeError: encodedFile.srcElement est pas défini
Je suis en utilisant google Chrome pour tester, mais je vais avoir besoin de travailler dans le dernier Android et iOS navigateurs.

OriginalL'auteur sissonb | 2013-02-19

  1. 13

    Après quelques recherches, j'ai trouvé la réponse à partir de ici
    En gros, j'ai besoin d'envelopper les données binaires brutes dans un arraybuffer et convertir le binaire des caractères Unicode.

    C'est le code qui a été absent,

        var binaryImg = atob(base64Image);
    var length = binaryImg.length;
    var ab = new ArrayBuffer(length);
    var ua = new Uint8Array(ab);
    for (var i = 0; i < length; i++) {
        ua[i] = binaryImg.charCodeAt(i);
    }

    La totalité de l'échantillon de code est ici

    OriginalL'auteur sissonb

  2. 1

    URL.createObjectURL s'attend à un Goutte (qui peut être un File) comme argument. Pas une chaîne de caractères. C'est pourquoi URL.createObjectURL(file) œuvres.

    Au lieu de cela, vous créez un FileReader reader qui lit file comme un de données url, puis servez-vous que les données de l'url pour créer un autre Blob (avec le même contenu). Et puis même vous créer une reader2 pour obtenir un chaîne binaire de l'construits blob. Toutefois, ni le base64Image chaîne d'url de la partie (même si btoa-décodé à une chaîne plus longue), ni le decoded.binary chaîne sont valable arguments pour URL.createObjectURL!

    Est-il possible de convertir base64Image dans le fichier d'origine? J'essaie de défaire ce que reader.readAsDataURL(file); avec readAsBinaryString() ou atob().
    var blob = new Blob([base64Image],{type:"image/jpeg"}); devrait le faire? Essayez URL.createObjectURL(blob);
    Il montre une image brisée pour URL.createObjectURL(blob); j'ai mis à jour le JSFiddle ici, jsfiddle.net/qL86Z/7 Voici une vidéo montrant l'image brisée. screencast.com/t/vVVGNTvo

    OriginalL'auteur Bergi