Преобразование двоичных данных в base64 с помощью javascript

HTML5 позволяет хранить данные локально, что я думаю, это здорово. Например, вот как вы можете его использовать:

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

в html вы можете динамически отображать изображение, установив его источник в:

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

у меня вопрос как преобразовать двоичные данные в строку base64, чтобы я мог воспользоваться локальным хранилищем html5?

например, было бы здорово, если бы я мог:

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

Я знаю, что могу решить эту проблему проблема путем обертывания изображения вокруг холста с помощью html5, а затем преобразования его в base64string. также я могу сделать определенную службу на сервере, которая отправит данные строки base64 этого изображения (someImage.aspx).Я просто хочу знать, можно ли получить двоичные данные с сервера и преобразовать их в строку base64.

10
base64 html5 javascript

3 ответов

попробовать btoa функция:

   var data = btoa(r);
5

чтобы предотвратить ошибку InvalidCharacterError, вам нужно сделать следующее:

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

используйте FileReader для кодирования изображения в виде URL-адреса данных:

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]));
});
3