前言
在前端开发的世界里,处理文件和二进制数据是一个常见的需求。从图片上传、文件下载到数据缓存,我们都需要与二进制数据打交道。HTML5 引入的 Blob 对象,就像是一把瑞士军刀,为我们处理二进制数据提供了强大而便捷的方式。今天,就让我们一起来深入了解这个 “王者对象”—— Blob 。
什么是 Blob?
Blob 是 “Binary Large Object” 的缩写,即二进制大对象。在 HTML5 中, Blob 对象代表了一段不可变的、原始数据的类文件对象。它可以包含文本、图片、音频、视频等各种类型的数据,并且可以像文件一样进行操作。简单来说, Blob 就像是一个容器,里面装着我们需要处理的二进制数据。
Blob的基本用法
要想学好Blob的用法,我们先要了解base64格式:Base64 是一种将二进制数据编码为 ASCII 字符的编码方式,使其能在文本协议(如 JSON、HTTP、邮件)中安全传输,是由谷歌推出来的。图一就是base64格式
图一
从图片转Base64开始
const base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==';
将Base64编码的字符串解码为原始的二进制数据。
const base64Data=atob('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')
console.log(base64Data);
这里我们用到atob这个方法,我们可以这样理解:a to b a就是表示ASCII 编码 b就是表示Binary,图二就是运行结果
图二
为什么图二会乱码?:那是因为这时候并不是utf-8编码,我们需要把上面的二进制转成utf-8编码。
const byteArray =new Uint8Array(base64Data.length);//这样创建的 `Uint8Array` 会**初始化为全 0**
console.log(byteArray);
for(let i=0;i<base64Data.length;i++){
byteArray[i]=base64Data.charCodeAt(i);
}
// // 全是数字
console.log(byteArray);
这样就可以转换为utf-8编码(0-255之间的数字)了。运行结果为图三
图三
Blob登场!!!
const blob =new Blob([byteArray],{type:'image/png'});
console.log(blob);
通过
Blob 构造函数将 Uint8Array 包装为二进制对象,并指定 MIME 类型(如 image/png)。
为 Blob 对象生成临时 URL
在浏览器中,我们可以使用 URL.createObjectURL 方法为 Blob 对象生成一个临时的 URL。这个 URL 可以像普通的文件 URL 一样使用,比如作为图片的 src 属性、音频的 src 属性等。
const imageUrl=URL.createObjectURL(blob);
console.log(imageUrl);
document.getElementById('blobImage').src=imageUrl;
总结
Blob 对象作为 HTML5 中的一个重要特性,为前端开发者提供了强大的二进制数据处理能力。它可以用来处理各种类型的文件,实现文件的预览、上传、下载、切片、压缩等功能。通过合理使用 Blob 对象,我们可以更加高效地处理二进制数据,提升前端应用的性能和用户体验。
在实际开发中,我们可以结合 FileReader 、 XMLHttpRequest 等 API 来进一步扩展 Blob 对象的功能。比如,使用 FileReader 来读取 Blob 对象的内容,使用 XMLHttpRequest 来上传和下载 Blob 对象。