Converti i dati binari in base64 con javascript

Question

HTML5 ti consente di memorizzare i dati localmente che ritengo sia ottimo. Per esempio ecco come si può utilizzare:

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

In HTML è possibile visualizzare in modo dinamico un'immagine settig sorgente:

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

Quindi la mia domanda è come posso convertire i dati binari su una stringa base64 in modo da poter sfruttare l'archiviazione locale html5?

Per esempio sarà grande se potessi:

$.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; 
      }, 
}); 

---

So che avrei potuto risolvere questo problema avvolgendo l'immagine attorno una tela utilizzando HTML5 quindi la conversione che per base64string. inoltre posso creare un servizio specifico sul server che invierà i dati di stringa base64 di quell'immagine (someImage.aspx). Voglio solo sapere se sarà possibile recuperare i dati binari da un server e convertirli in una stringa base64.

Answer 1

Prova la funzione btoa:

var data = btoa(r); 

Answer 2

Utilizzare un FileReader per codificare l'immagine come un URL di dati:

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

Per evitare errori 'InvalidCharacterError', devi fare questo:

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