如何将图片二进制字符串转换为Blob URL并在HTML中显示？

嘿，我来帮你搞定这个问题！你代码里的核心问题是直接把逗号分隔的数字字符串传给了Blob，但Blob需要的是真正的二进制字节数据，不是这种文本格式的数字序列。咱们一步步修正：

错误原因分析 #

你现在的binary是一串文本字符串，当你把它直接放进Blob里时，浏览器会把它当成普通文本处理，而不是PNG需要的二进制字节流，自然无法解析成图片。

正确的转换步骤 #

1. 把逗号分隔的字符串分割成单个数字的数组
2. 将数字数组转换为Uint8Array（这是PNG图片需要的8位无符号字节类型）
3. 用这个Uint8Array创建Blob，指定正确的MIME类型
4. 生成Blob URL并绑定到img元素

完整修正代码 #

// 你的原始二进制数字字符串
var binary = "137, 80, 78, 71, 13, 10, 26, 10, 0";

// 步骤1：分割字符串并转成数字数组
var byteNumbers = binary.split(', ').map(num => parseInt(num, 10));

// 步骤2：转换为Uint8Array（二进制字节数组）
var byteArray = new Uint8Array(byteNumbers);

// 步骤3：创建正确的Blob
var blob = new Blob([byteArray], { type: 'image/png' });

// 步骤4：生成Blob URL并赋值给图片元素
var blobUrl = URL.createObjectURL(blob);
document.getElementById("image").src = blobUrl;

对应的HTML部分保持不变：

<img id="image" />

额外提示 #

• 记得在不需要Blob URL时调用URL.revokeObjectURL(blobUrl)，避免内存泄漏
• 确保你的二进制数据是完整的PNG文件（你给出的示例是PNG的开头部分，完整的PNG还需要后续字节才能正常显示）

内容的提问来源于stack exchange，提问作者Manas Sanas