用实例学习Javascript Blob对象

107 阅读2分钟

在这篇博文中,我将介绍一下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)