Как разобрать в base64 строку двоичное изображение из ответа?

Я хочу проанализировать запрошенное изображение из моего REST API в строку base64.

Во-первых... Я думал, было бы просто, просто использовать функцию window.btoa() для этой цели.

Когда я пытаюсь сделать это в такой части моего приложения:

.done( function( response, position ) {
    var texture = new Image();
    texture.src = "data:image/png;base64," + window.btoa( response );

У меня есть следующая ошибка: Uncaught InvalidCharacterError: не удалось выполнить 'btoa' в 'Window': строка, которая должна быть закодирована, содержит символы за пределами диапазона Latin1.

Как я читал здесь: javascript atob возвращает "String содержит недопустимый символ"

Проблема возникает из-за newlines in the response и почему window.btoa() не удалось. Любой формат двоичного изображения, конечно, будет иметь новые строки... Но поскольку из ссылки выше предложение было удалить/заменить эти символы - это плохое предложение для меня, потому что, если удалить или заменить некоторые символы из двоичного образа, это будет просто поврежден.

Конечно, возможные альтернативы относятся к дизайну API: - добавить некоторую функцию, возвращающую представление base64 - добавить некоторую функцию, возвращающую url к изображению

Если я не буду его исправлять, я верну свое представление base64 с сервера, но мне не нравится такой способ.

Существует ли какой-то способ решить мою проблему с обработкой двоичного изображения из ответа, как показано выше в части скриншота, не так ли?

Ответ 1

Я думаю, что часть проблемы, которую вы нажимаете, заключается в том, что jQuery.ajax делает not изначально поддерживает типы blob/arraybuffer XHR2, которые могут прекрасно обрабатывать двоичные данные (см. Чтение двоичных файлов с помощью jQuery.ajax).

Если вы используете собственный объект XHR с xhr.responseType = 'arraybuffer', тогда прочитайте массив ответов и преобразуйте его в Base64, вы получите то, что хотите.

Вот решение, которое работает для меня:

// http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/
function fetchBlob(uri, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', uri, true);
  xhr.responseType = 'arraybuffer';

  xhr.onload = function(e) {
    if (this.status == 200) {
      var blob = this.response;
      if (callback) {
        callback(blob);
      }
    }
  };
  xhr.send();
};

fetchBlob('https://i.imgur.com/uUGeiSFb.jpg', function(blob) {
  // Array buffer to Base64:
  var str = btoa(String.fromCharCode.apply(null, new Uint8Array(blob)));

  console.log(str);
  // Or: '<img src="data:image/jpeg;base64,' + str + '">'
});

Ответ 2

вместо того, чтобы перебирать blob с помощью _arrayBufferToBase64(), используйте apply() для преобразования, он в 30 раз быстрее в моем браузере и более лаконичен

// http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/
function fetchBlob(uri, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', uri, true);
  xhr.responseType = 'arraybuffer';

  xhr.onload = function(e) {
    if (this.status == 200) {
      var blob = this.response;
      if (callback) {
        callback(blob);
      }
    }
  };
  xhr.send();
};

fetchBlob('https://i.imgur.com/uUGeiSFb.jpg', function(blob) {
  var str = String.fromCharCode.apply(null, new Uint8Array(blob));
  console.log(str);
  // the base64 data: image is then
  // '<img src="data:image/jpeg;base64,' + btoa(str) + '" />'	
});

Ответ 3

Я предполагаю использовать escape в строке перед тем, как передать ее функции, без вызова API я не могу проверить себя.

Тест

encodeURI("testñ$☺PNW¢=")

возвращает

"test%C3%B1$%E2%98%BAPNW%C2%A2="

Он просто ускользает от всех символов, он должен избегать всех недопустимых символов в строке

Тест

encodeURI("¶!┼Æê‼_ðÄÄ┘Ì+\+,o▬MBc§yþó÷ö")

возвращает

"%C2%B6!%E2%94%BC%C3%86%C3%AA%E2%80%BC_%C3%B0%C3%84%C3%84%E2%94%98%C3%8C++,o%E2%96%ACMBc%C2%A7y%C3%BE%C3%B3%C3%B7%C3%B6"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

Ответ 4

Проблема, с которой вы сталкиваетесь, заключается в том, что ответ считается Unicode String. См. Раздел о Unicode Strings здесь: window.btoa

В этом сообщении предлагаются несколько решений

Ответ 5

База 64 Данные изображения работают для меня, как

<img src="data:image/png;base64,' + responce + '" />