ArrayBuffer для JPEG

Question

Я транслирую ArrayBuffers с сервера Python и пытаюсь интерпретировать каждый из них как изображение на стороне клиента с помощью JavaScript.Они принимаются как массивные буферы в JavaScript.Однако я не могу сделать их доступными для чтения с помощью атрибута src тегов изображения.Я попытался сгенерировать их в объекты Blob, а затем с помощью window.URL.createObjectURL (blob).Это тоже не сработает.

URL-адрес большого двоичного объекта выглядит следующим образом: null / e2836074-64b5-4959-8211-da2fc24c35a6 не так?

Есть ли какие-либо предложения / есть решение?

Большое спасибо.

var arrayBuffer = new Uint8Array(stream.data);
var blob = new Blob([arrayBuffer], {type: "image/jpeg"});
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
console.log(imageUrl);
img.src = imageUrl;

изображение буфера массива

Answer 1

Если у вас есть какой-то контроль над вещами, вы должны использовать responseType blob при вызове Javascript.Это позволит вам использовать данные, которые вы получаете с вашего сервера напрямую, вместо того, чтобы пытаться получить к ним доступ через ArrayBuffer

См. Пример следующего скрипта: https://jsfiddle.net/ort74gmp/

// Simulate a call to Dropbox or other service that can
// return an image as a blob
var xhr = new XMLHttpRequest();

// Use JSFiddle logo as a sample image to avoid complicating
// this example with cross-domain issues.
xhr.open( "GET", "https://fiddle.jshell.net/img/logo.png", true );

// Ask for the result as an ArrayBuffer.
xhr.responseType = "blob";

xhr.onload = function( e ) {
    var blob = this.response;
    var reader = new FileReader();
    reader.onload = function() {
        var dataURL = reader.result;
      document.querySelector('#photo').src = dataURL;
    }
    reader.readAsDataURL(blob);
};

xhr.send();