ArrayBuffer到jpeg

Question

我从一个Python服务器流ArrayBuffers，我试图解释每一个作为与JavaScript客户端的图像。他们被接收为在javascript arraybuffers。不过，我不能让他们能够通过图像标记src属性可读。我曾尝试生成它们变成然后用window.URL.createObjectURL（BLOB）的Blob对象。这工作处理不当或者。

团块的URL看起来像这样的斑点：空/ 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

如果你有过任何东西的控制，你应该使用Blob的responseTyp的在你的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();