前端二进制流图片转换base64
时间: 2024-08-14 12:01:51 浏览: 59
前端js图片压缩以及base64转换file文件(附使用说明)#资源达人分享计划#
前端二进制流图片转换成Base64编码通常是在需要将图片数据作为URL的一部分传递给服务器,或者是显示在线上环境中,比如HTML img标签直接支持Base64的数据。这个过程可以分为以下几个步骤:
1. **获取二进制流**: 图片作为一个File对象或者Blob对象(通常是用户上传文件、canvas绘制或网络请求得到的结果),它包含了原始的图像字节。
2. **读取二进制数据**: 使用FileReader或ArrayBuffer API,逐块读取二进制数据。
3. **创建一个Data URL**: 将读取到的二进制数据转化为Base64字符串。这通常涉及到对数据进行`btoa()`函数处理,该函数将输入的Uint8Array转换为Base64编码的字符串。
```javascript
let reader = new FileReader();
reader.readAsDataURL(file); // file 是Image类型的Blob
reader.onload = function(event) {
let base64Data = event.target.result;
// base64Data现在就是图片的Base64编码了
// 可以赋值给img.src 或者发送到服务器
};
```
阅读全文