将二进制转换为 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

当你想显示图像时，你必须这样做：

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

但是我不确定你的二进制文件是否正确。

Answer 2

你必须：

将您的字符串转换为整数数组，
将该数组转换为二进制字符串，
将其转换为 base64 并
将其注入到 <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 等

将二进制转换为 blob url

Convert binary to blob url

html

javascript

blob