saber 酱的抱枕

Fly me to the moon

03/31
2017
学习

在JavaScript中创建Blob对象

JavaScript中的Blob对象可以存储二进制数据,并且还可以为数据指定MINE类型,因此适合在网页上储存文件用。

创建Blob对象需要使用new Blob()构造函数,它的语法如下:

Blob(blobParts[, options])

它有两个参数,第一个参数blobParts是要转化为Blob对象的数据,它必须在一个数组里。即使这份数据本来是独立的,也要创建一个数组把它包含到数组里。
第二个参数是可选的,使用Object类型的键值对来指定MINE类型。

示例:

var data='<b>aaa</b>';   
var blob=new Blob([data],{"type":"text/html"});   
console.log(blob);  

上例中是储存了一个html类型的Blob对象,实际使用中我们也可以储存其他文件类型,常见的有图片、json等。

相关资料:MDN上的相关内容

此外,在使用XMLHttpRequest来获取内容时,也可以直接将返回内容的type设置为Blob。返回的内容将被转换成Blob对象,MINE信息会根据返回的内容自动设置。
(不过目前我只能用异步的XMLHttpRequest设置返回类型为Blob,同步的会报错。我还没找到能将同步的XMLHttpRequest的数据转化为Blob对象的办法)

如下例,通过XMLHttpRequest读取一个图片的内容,并将其设置为Blob类型。之后为其创建一个url,用于下载图片。

<a href="" download=""></a>
<script>
	var a=document.querySelector("a");
	var xhr=new XMLHttpRequest();
	xhr.open("get","/f/head15.jpg",true);
	xhr.responseType="blob";
	xhr.onload=function (argument) {
		if (this.status == 200) {
			var blob = this.response;
	    	a.href=window.URL.createObjectURL(blob);
	    	a.download="head.jpg";
	    	a.click();
	    	window.URL.revokeObjectURL(a.href);
	    }
	}
	xhr.send();
</script>

不过由于跨域限制,只能获取不跨域或者设置了允许跨域的文件。

关于创建url的部分,可以参考《使用URL.createObjectURL创建url对象》

在JavaScript中创建Blob对象