在这篇博文中,我将介绍一下javascript blob对象的例子。在javascript中,文件数据可以用Blob对象来表示。文件类型包括图像、视频、音频、文档和excel文件。
在处理本地或远程文件时,可以使用blob对象。Blob内容可以临时存储,也可以存储在文件中。
Blob对象的语法
可以通过多种方式创建Blob对象
可以使用Blob空构造函数或Blob参数构造函数来创建该对象
Blob(blob parts[, options])
Blob()
参数语法
Blob有两个属性
Size属性-- 返回blob对象的字节数大小
type属性-- 返回blob对象的MIME类型.如果类型不是正确的格式,则返回空.
Blob方法
Blob.slice(\[start\[, end\[, contentType\]\])
我们也可以使用字节范围数据和内容类型创建一个新的blob对象。这是另一种创建blob对象的方法
var blob = new Blob();
console.log(blob.size); // 返回0
console.log(blob.type); //返回空,因为blob的格式类型不详
var blob = new Blob(\['name', "kiran"\], { type: 'plain/text' });
console.log(blob.size); // 返回9字节的数据
console.log(blob.type); // 返回普通/文本作为输出
实例与教程
我们将看到blob对象的基本使用实例
如何在Javascript中把图像转换为Blob对象?
这个例子也是使用blob对象在HTML中显示图片
在本地或URL中显示图像 使用图像URL的XMLHttpRequest对象进行异步调用加载远程URL即图像URL,将图像数据存储在blob中。使用原始数据创建一个blob对象。
var xhp = new XMLHttpRequest();
xhp.open( "GET", "https://www.freelogodesign.org/Content/img/laptop_free-logo.png", true );
xhp.responseType = "arraybuffer";
xhp.onload = function( e ) {
var array = new Uint8Array( this.response );
var blob = new Blob( [ array ], { type: "image/jpeg" } );
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
var img = document.querySelector( "#logo" );
img.src = imageUrl;
};
xhp.send();
检查两个blob的大小是否相等
不检查Blob内容,使用size属性检查大小是否相等
var blob1 = new Blob(\['a'\]);
var blob2 = new Blob(\['b'\])
var blob3 = new Blob(\['ac'\])
console.log(blob1.size===blob2.size) // return true
console.log(blob1.size===blob3.size) // return false
使用FileReader从Blob中获取数据
Blob可以是XML、音频/视频、单词文件,这些文件都有原始字节的数据。
这也是FilreReader博客的例子,用于读取数据并返回URL或字符串格式的数据
var reader = new FileReader();
reader.onload = function(event) {
var dataURL = event.target.result,
});
reader.readAsArrayBuffer(blob)