如何從類型數組中的二進制數據創建PNG blob？

Question

我有一些恰好是PNG的二進制數據。我想把它變成一個blob，得到一個blob的URL，並將其顯示爲一個圖像（或任何其他地方的圖像URL是有效的，如CSS等）。

這是我的嘗試。首先，我做了一個小的8x8紅方用黃色的「F」的形象，並使用pngcrush使其變小

你可以看到原來的91個字節的圖像顯示就好了（這是唯一的8×8像素）

然後，對於這個示例，我將其轉換爲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構造是對象的數組，以在團塊放所以改變它從

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