kodowanie/dekodowanie obrazu z obrazem base64 zrywa obraz

Question

Próbuję kodować i dekodować obraz. Używam metody readAsDataURL FileReader do konwersji obrazu na base64. Następnie, aby go przekonwertować, próbowałem używać readAsBinaryString() i atob() bez powodzenia. Czy istnieje inny sposób utrwalania obrazów bez ich kodowania base64?

readAsBinaryString()

Starts reading the contents of the specified Blob, which may be a File. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains the raw binary data from the file.

Każdy pomysł, co robię źle tutaj?

Przykładowy kod 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 
}); 

Dzięki!

Answer 1

Po kilku dalszych badaniach znalazłem odpowiedź od here Zasadniczo potrzebowałem owinąć surowy plik binarny w arraybuffer i przekonwertować znaki binarne na kod Unicode.

Jest to kod, który zaginął,

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

Pełne przykładowy kod jest here

Answer 2

URL.createObjectURL oczekuje, że jako argument zostanie użyty Blob (który może być File). Nie ciąg. Dlatego działa URL.createObjectURL(file).

Zamiast tworzysz FileReaderreader który czyta file jako URL danych, a następnie użyć tego url dane do stworzenia innego Blob (z tych samych treści). A nawet utworzyć reader2, aby uzyskać binarny łańcuch z właśnie skonstruowanego blob. Jednak ani część adresu url base64Image (nawet jeśli btoa -odekodowany na większy ciąg), ani ciąg decoded.binary nie są argumentami vaild dla URL.createObjectURL!