Convertir des données binaires en base64 avec javascript
HTML5 vous permettent 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 dynamiquement afficher une image en mettant sa source à:
"data:image/jpg;base64," + (base64string)
alors ma question Est Comment puis-je convertir des données binaires en chaîne base64 pour profiter du stockage local html5?
Par exemple, il sera bon si je le 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ésolvez ce problème en enveloppant l'image autour d'une toile en utilisant html5 puis en convertissant cela en base64string. aussi je peux faire un service spécifique sur le serveur qui enverra une chaîne de données base64 de cette image (someImage.aspx). je veux juste savoir s'il est possible de récupérer des données binaires à partir d'un serveur et de les convertir en une chaîne base64.
3 réponses
pour prévenir l'erreur 'InvalidCharacterError' , vous devez faire ceci:
var base64EncodedStr = btoa(unescape(encodeURIComponent(rawData)));
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]));
});