ArrayBuffer转jpeg

Question

我正在从python服务器上流式传输ArrayBuffers，并试图用javascript在客户端将它们解释为一个图像。它们被接收为javascript中的arraybuffer。然而，我不能让它们被图像标签src属性读取。我尝试过将它们生成Blob对象，然后使用window.URL.createObjectURL(blob)。这也不管用。

blob url看起来像这个blob: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;

array buffer image

Answer 1

如果你对任何事情有任何控制，你应该在你的Javascript调用中使用blob的responseType。这将允许您直接使用从服务器获取的数据，而不是尝试通过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();