將二進制轉換為blob url

Question

我有一個圖像的二進制數據，如 137、80、78、71、13、10、26、10、0 作為字符串。 我想在 html 中將其顯示為 blob url。 如何將二進制文件轉換為 Blob url。 我試過做這些，但我沒有得到圖像。

 var binary = "137, 80, 78, 71, 13, 10, 26, 10, 0"; var blob = new Blob([binary], { type: 'image/png' }); var blobUrl = URL.createObjectURL(blob); console.log(blobUrl); document.getElementById("image").src = blobUrl;

 <img id="image" />

Answer 1

你必須：

1. 將您的字符串轉換為整數數組，
2. 將該數組轉換為二進制字符串，
3. 將其轉換為 base64 和
4. 將其注入<img>的src屬性中。

var numbers = binary.trim().split(/\s*,\s*/g).map(x => x/1);
var binstr = String.fromCharCode(...numbers);
var b64str = btoa(binstr);
var src = 'data:image/jpeg;base64,' + b64str;
document.getElementById("image").src = src;

請記住，您必須使用正確的圖像類型，例如 jpeg、png 等。

Answer 2

當您想顯示圖像時，您必須執行以下操作：

var binary = "137, 80, 78, 71, 13, 10, 26, 10, 0";
document.getElementById("image").src = 'data:image/jpeg;base64,' + btoa(binary)

但我不確定你的二進制文件是否正確。