javaScript中Blob对象的学习笔记_H5之家 - 中国HTML5教程资源分享第一站

下面我们来看一篇关于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属性的值，默认为一个空字符串。

没有了

在js中对象创建模式是一个什么样的模式呢，对于这个问题下面小编来为各位介绍一下关于JavaScript对象创建模式入门教程详解吧。

在JavaScript中创建对象是很容易的，可以使用对象字面量或者构造函数。常用的创建对象的模式有以下几种：

一. 工厂模式

工厂模式抽象了具体对象的过程，用函数来封装以特ing接口创建对象的细节。

如下：

function createAnimal(name, age) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function() {
        alert(this.name);
    }
    return o;
}

var cat = createAnimal("cat", 12);
var dog = createAnimal("dog", 3);
工厂模式虽然解决了创建多个相似兑现过的问题，但是却没有解决对象识别的问题。

二. 构造函数模式

构造函数模式可以创建特定类型的对象。

function Animal(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function() {
        alert(this.name);
    }
}
var cat = new Animal("cat", 12);
var dog = new Animal("dog", 3);
可以使用对象的constructor属性或instanceof操作符来标识对象类型。

cat.constructor == Animal // true

cat instanceof Animal // true
三. 原型模式

每个函数都有一个prototype（原型）属性。这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

使用原型对象的好处是，可以让所有对象实例共享它所包含的属性和方法。

function Animal() {}
Animal.prototype.name = "animal";
Animal.prototype.age = 1;
Animal.prototype.sayName = function() {
alert(this.name);
}

var test1 = new Animal();
test1.sayName(); // "animal"

var test2 = new Animal();
test2.sayName(); // "animal"

alert(test1.sayName === test2.sayName); // true
或者：

function Animal() {}
Animal.prototype = {
    constructor: Animal,
    name: "animal",
    age: 1,
    sayName: function() {
        alert(this.name);
    }
};
原型中所有属性是被很多实例共享的，通过在实例上添加一个同名属性，可以隐藏原型中的对应属性。但是，对于包含引用类型值的属性来说，问题就比较明显了，如下：