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

Question

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

这是我尝试过的。首先，我制作了一个带有黄色“F”图像的 8x8 红色小方 block ，并使用 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

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