Konwertuj dane binarne na base64 za pomocą javascript

Question

HTML5 pozwala przechowywać dane lokalnie, co moim zdaniem jest wspaniałe. Na przykład o to, jak można go używać:

 var store = window.localStorage; 
     store.setItem('foo', "hellow world"); 
     var test = store.getItem('foo'); 
     // test should = "hellow world" 

w HTML można dynamicznie wyświetlania obrazu przez settig źródła do:

 "data:image/jpg;base64," + (base64string) 

Więc moje pytanie brzmi: jaki sposób można przekonwertować dane binarne do łańcucha base64, aby móc korzystać z lokalnego magazynu HTML 5?

Na przykład to będzie wspaniale, gdyby się dało:

$.ajax({ 
    url: 'someImage.png', 
    type: 'POST', 
    success: function (r) { 

       // here I want to convert r to a base64 string ! 
       // r is not binary so maybe I have to use a different approach 
       var data = ConvertToBase64(r); 



       document.getElementById("img").src = "data:image/png;base64," + data; 
      }, 
}); 

---

wiem mogę rozwiązać ten problem poprzez owinięcie wokół płótnie obraz przy użyciu HTML5 następnie przekształcenie że do base64string. również mogę utworzyć konkretną usługę na serwerze, która wyśle ​​dane ciągu base64 tego obrazu (someImage.aspx). Chcę tylko wiedzieć, czy będzie możliwe pobranie danych binarnych z serwera i przekonwertowanie ich na ciąg base64.

Answer 1

Spróbuj btoa funkcję:

var data = btoa(r); 

Answer 2

Użyj FileReader zakodować swój wizerunek jako adres URL danych:

jQuery.ajax({...}) 
.done(function (r) { 
    var reader = new FileReader(
    reader.onload = (function(self) { 
    return function(e) { 
     document.getElementById("img").src = e.target.result; 
    } 
    })(this); 
    reader.readAsDataURL(new Blob([r])); 
}); 

Answer 3

Aby uniknąć błędu 'InvalidCharacterError', trzeba to zrobić:

var base64EncodedStr = btoa(unescape(encodeURIComponent(rawData)));