ArrayBuffer 转 jpeg答案

【问题标题】：ArrayBuffer to jpegArrayBuffer 转 jpeg
【发布时间】：2019-06-27 05:42:28
【问题描述】：

我正在从 python 服务器流式传输 ArrayBuffers，并尝试使用 javascript 在客户端将每个图像解释为图像。它们在 javascript 中作为数组缓冲区被接收。但是我不能让它们被图像标签 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

【问题讨论】：

流数据实际包含什么？它是原始像素值，还是您发送在磁盘上的文件中找到的完整图像，或者完全是其他东西？（无法判断该 blob url 是否好用 - 它太短了，您需要 whole 东西）
@enhzflep 感谢您的回复。我在收到数组缓冲区后添加了一张照片。
您能否在问题中包含至少一个完整的TypedArray 纯文本或格式化代码？您是创建了Blob 对象还是将ArrayBuffer 直接传递给URL.createObjectURL()？
@Kai - 好吧，那么显然没有大小信息的格式。没有明显的标题可言。因此，除此之外，您在流式传输什么，您甚至知道吗？没有显示任何形状或形式来指示数据的格式。图像应该有多宽，多高？它有 alpha 通道吗？每个像素有多少位？数据是否以任何方式压缩？废话，废话，废话，废话 - 有很多事情需要确定，以确保这个问题不会太宽泛且无法回答！
@KaiFerrall 你确定图片类型是"image/jpeg"吗？您能否在问题中包含至少一个完整的TypedArray？见stackoverflow.com/help/mcve

标签： javascript arraybuffer typed-arrays

【解决方案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();

【讨论】：