如何从类型化数组中的二进制数据创建PNG blob？

Question

我有一些恰好是PNG的二进制数据。我想将它变成一个blob，获取blob的URL并将其显示为图像（或者其他任何地方图像URL都有效，如css等。）

这是我尝试过的。首先，我制作了一个带有黄色“F”图像的小型8x8红色正方形，并使用pngcrush将其缩小

你可以看到原始的91字节图像显示得很好（它只有8x8像素）

然后，对于这个示例，我将其转换为JavaScript数组，我将其复制到Uint8Array中，我从中创建一个blob并从blob创建一个URL，将其分配给图像但不显示图像。 / p>

var data = new Uint8Array([
  137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,8,0,0,
  0,8,8,2,0,0,0,75,109,41,220,0,0,0,34,73,68,65,84,8,215,99,120,
  173,168,135,21,49,0,241,255,15,90,104,8,33,129,83,7,97,163,136,
  214,129,93,2,43,2,0,181,31,90,179,225,252,176,37,0,0,0,0,73,69,
  78,68,174,66,96,130]);
var blob = new Blob(data, { type: "image/png" });
var url = URL.createObjectURL(blob);
var img = new Image();
img.src = url;
console.log("data length: " + data.length);
document.body.appendChild(img);

img { width: 100px; height: 100px; }

如何将其显示为blob网址？

Answer 1

问题是Blob构造函数的第一个参数是一个放在blob中的对象数组，所以从

更改它

var blob = new Blob(data, ...

到

var blob = new Blob([data], ...

修好了

var data = new Uint8Array([
  137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,8,0,0,
  0,8,8,2,0,0,0,75,109,41,220,0,0,0,34,73,68,65,84,8,215,99,120,
  173,168,135,21,49,0,241,255,15,90,104,8,33,129,83,7,97,163,136,
  214,129,93,2,43,2,0,181,31,90,179,225,252,176,37,0,0,0,0,73,69,
  78,68,174,66,96,130]);
var blob = new Blob([data], { type: "image/png" });
var url = URL.createObjectURL(blob);
var img = new Image();
img.src = url;
console.log("data length: " + data.length);
console.log("url: " + url);
document.body.appendChild(img);

img { width: 100px; height: 100px; image-rendering: pixelated; }

Answer 2

不是答案而是问题。我也需要这样做。

问题：你是如何得到 var data = new Uint8Array([ 中的字节的？它们是否以某种方式包含宽度/高度？

就我而言，我只需要从图像中的原始字节开始。奥秘在于如何包含宽度/高度以及数据。