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

四. Blob兼容性:

Blob对象的兼容性详情可查看:http://caniuse.com/#search=blob

image_1at1sc3qe3dm1bi62ep1g9f9al9.png-63kB

备注:图片截取自 http://caniuse.com/#search=blob

五. 参考:

文件和二进制数据的操作– JavaScript 标准参考教程(alpha)

Blob —— MDN

HTMLCanvasElement.toBlob() —— MDN

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/js/1017