Показать двоичные данные изображения в изображении

Question

Я не могу понять, как отображать байты изображения, возвращенные из веб-API в HTML-изображения.Вот как данные выглядят в консоли Firefox (для краткости усечены):

������JFIF�������������C����������������������...

Я пытался использовать data:image/jpeg;base64, " + btoa(data) в качестве источника изображения, я получаю ошибку String contains an invalid character.Когда я использую btoa(unescape(encodeURIComponent(data))) вместо btoa, я не получаю ошибок, но изображение не отображается.Тип содержимого ответа: image/jpeg.

Изображение правильно отображается в Fiddler.

Есть идеи, как получить изображение для отображения данных?

Answer 1

У меня это работает.Проблема заключалась в том, что я использовал Jquery $.ajax для получения данных изображения.Jquery автоматически преобразовал полученные байты в строку UTF-16 и передал эту строку в обратный вызов success.

Если я использовал базовый XMLHttpRequest, я мог бы отобразить полученное изображение в формате html, например так:

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.responseType = "arraybuffer";
xhr.setRequestHeader("Content-Type", "application/json");    
xhr.onload = function() {
  var byteArray = new Uint8Array(xhr.response);
  var base64Data = btoa(String.fromCharCode.apply(null, byteArray));
  image.attr("src", "data:image/jpeg;base64, " + base64Data);
};
xhr.send(jsonPayload);