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

Question

Преобразование двоичных данных в 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;

            },

});

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

570 3

javascript html5 base64

3 ответов:

Comments

Ничего не найдено.

Esailija · Accepted Answer · 2012-06-11 18:04:48

Попробуйте btoa функция:
   var data = btoa(r);

Frane Poljak · Accepted Answer · 2017-01-03 15:51:45

Чтобы предотвратить ошибку InvalidCharacterError, вам нужно сделать следующее:
var base64EncodedStr = btoa(unescape(encodeURIComponent(rawData)));

Bastian Voigt · Accepted Answer · 2015-03-12 16:32:35

Используйте 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]));
});