Blob表示二进制原始数据,一个Blob对象就是一个包含有只读原始数据的类文件对象。
继承Blob功能的API有:
File对象:负责处理那些以文件形式存在的二进制数据,也就是操作本地文件;
FileList对象:File对象的网页表单接口;
FileReader对象:负责将二进制数据读入内存内容;
URL对象:用于对二进制数据生成URL。
一. 创建Blob对象的方法
创建Blob对象的方法有三种,如下:
1)可以调用Blob构造函数。
2)还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象。
3)还可以调用canvas对象上的toBlob()方法。
1.1 使用Blob构造函数创建:
Blob构造函数接受两个参数。第一个参数是一个包含实际数据的数组,第二个参数是数据的类型,这两个参数都不是必需的。
var myBlob = new Blob(["Hello World"], "text/xml");
1.2 使用slice()方法创建:
Blob对象的slice()方法,将二进制数据按照字节分块,返回一个新的Blob对象。
var newBlob = oldBlob.slice(startingByte, endindByte);
1.3 调用canvas对象上的toBlob()方法来创建:
语法:
void canvas.toBlob(callback, type, encoderOptions)
canvas.toBlob()方法的参数如下:
callback: 回调函数,可获得一个单独的Blob对象参数。
type: [可选] DOMString类型,指定图片格式,默认格式为image/png。
encoderOptions: [可选] Number类型,值在0与1之间,当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内,则使用默认值,其余参数将被忽略。
例子:
var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob) {
var newImg = document.createElement("img"),
url = URL.createObjectURL(blob);
newImg.onload = function() {
// no longer need to read the blob so it's revoked
URL.revokeObjectURL(url);
};
newImg.src = url;
document.body.appendChild(newImg);
});
二. Blob对象的属性:
属性名 类型 描述
size Long Blob对象的字节长度。只读。
type DOMString Blob对象的MIME类型。如果是未知类型,则返回一个空字符串。只读。
三. Blob对象的方法:
slice():返回一个新的Blob对象,包含了源Blob对象中指定范围内的数据。
slice()方法的参数如下:
start [可选] 开始索引,可以为负数,语法类似于数组的slice方法。默认值为0。
end [可选] 结束索引,可以为负数,语法类似于数组的slice方法。默认值为最后一个索引。
contentType [可选] 新的Blob对象的MIME类型,这个值将会成为新的Blob对象的type属性的值,默认为一个空字符串。