convertir los datos binarios en base 64 con javascript

Question

HTML5 le permiten almacenar datos localmente, lo que creo que es grande. Por ejemplo aquí es cómo se puede utilizar:

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

En HTML, puede mostrar dinámicamente una imagen por settig su nacimiento hasta:

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

Así que mi pregunta es cómo puedo convertir los datos binarios a una cadena base64 para que pueda aprovechar el almacenamiento local html5?

Por ejemplo que será muy bueno si pudiera:

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

---

Sé que podría resolver este problema envolviendo la imagen alrededor de un lienzo utilizando html5 convirtiendo después de que a base64string. también puedo hacer un servicio específico en el servidor que envíe datos de cadena base64 de esa imagen (someImagen.aspx). Solo quiero saber si será posible recuperar datos binarios de un servidor y convertirlos en una cadena base64.

Answer 1

Pruebe la función btoa:

var data = btoa(r); 

Answer 2

Use un FileReader para codificar la imagen como un enlace de datos:

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

Para evitar el error 'InvalidCharacterError', que tiene que hacer esto:

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