js实现二进制流转图片
二进制流转图片的方法
使用Blob和URL.createObjectURL
将二进制流转换为Blob对象，再通过URL.createObjectURL生成临时URL
const binaryData = new Uint8Array([...]); // 二进制数据
const blob = new Blob([binaryData], {type: 'image/jpeg'});
const imageUrl = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = imageUrl;
document.body.appendChild(img);
// 使用后记得释放内存
URL.revokeObjectURL(imageUrl);使用Base64编码
将二进制数据转换为Base64字符串直接作为图片源
const binaryData = new Uint8Array([...]);
const base64String = btoa(String.fromCharCode(...binaryData));
const img = document.createElement('img');
img.src = `data:image/jpeg;base64,${base64String}`;
document.body.appendChild(img);使用FileReader API
通过FileReader读取Blob对象并转换为DataURL
const binaryData = new Uint8Array([...]);
const blob = new Blob([binaryData], {type: 'image/png'});
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
document.body.appendChild(img);
};
reader.readAsDataURL(blob);注意事项
- 确保二进制数据是有效的图片格式
- 根据实际图片类型设置正确的MIME类型
- 大文件处理时考虑内存释放问题
- 跨域情况下可能需要额外处理CORS
性能优化建议
对于大尺寸图片建议使用Blob URL方式 Base64编码会增加约33%的数据体积 Web Worker可用于处理大型二进制数据转换
