web-dev-qa-db-fra.com

Convertir des données binaires en base64 avec javascript

HTML5 vous permet de stocker des données localement, ce que je trouve génial. Par exemple, voici comment vous pouvez l'utiliser:

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

En html, vous pouvez afficher dynamiquement une image en définissant sa source sur:

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

Donc ma question est comment puis-je convertir des données binaires en une chaîne base64 afin de pouvoir profiter du stockage local html5?

Par exemple, ce serait génial si je pouvais:

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

Je sais que je pourrais résoudre ce problème en enroulant l'image autour d'une toile à l'aide de html5, puis en la convertissant en base64string. Je peux aussi faire un service spécifique sur le serveur qui enverra une chaîne de données en base64 de cette image (someImage.aspx) .Je veux juste savoir s'il sera possible de récupérer des données binaires d'un serveur et de les convertir à une chaîne base64.

javascripthtml5base64
15
Tono Nam

Essayez la fonction btoa :

   var data = btoa(r);
3
Esailija

Pour éviter l'erreur "InvalidCharacterError", vous devez procéder comme suit:

var base64EncodedStr = btoa(unescape(encodeURIComponent(rawData)));
13
Frane Poljak

Utilisez un FileReader pour encoder votre image en tant qu'URL de données:

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]));
});
4
Bastian Voigt