javaScript中Blob对象的学习笔记

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属性的值，默认为一个空字符串。