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

Question

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

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

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

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

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 url？

Answer 1

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

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

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

Answer 2

问题是 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; }