如何从类型化数组中的二进制数据创建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网址？

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; }