BLOB二进制大数据

What is a Blob?

Creating a Blob

//first arguement must be an regular array. The array can be of any javascript objects. Array can contain array to make it multi dimensional
//second parameter must be a BlogPropertyBag object containing MIME property
var myBlob = new Blob(["This is my blob content"], {type : "text/plain"});

//first arguement must be an regular array. The array can be of any javascript objects. Array can contain array to make it multi dimensional
//second parameter must be a BlogPropertyBag object containing MIME property
var myBlob = new Blob(["This is my blob content"], {type : "text/plain"});
var myReader = new FileReader();
//handler executed once reading(blob content referenced to a variable) from blob is finished.
myReader.addEventListener("loadend", function(e){
document.getElementById("paragraph").innerHTML = e.srcElement.result;//prints a string
});
//start the reading process.
myReader.readAsText(myBlob);

<p id="paragraph"></p>

Blob URLs

//cross browser
window.URL = window.URL || window.webkitURL;

var blob = new Blob(['body { background-color: yellow; }'], {type: 'text/css'});

var link = document.createElement('link');
link.rel = 'stylesheet';
//createObjectURL returns a blob URL as a string.
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);

url

createObjectURL()

Remote data as Blobs

var xhr = new XMLHttpRequest();
xhr.open("GET", "/favicon.png");
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function()
{
document.getElementsByTagName("body")[0].innerHTML = xhr.response;//xhr.response is now a blob object
}
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open("GET", "/favicon.png");
//although we can get the remote data directly into an arraybuffer using the string "arraybuffer" assigned to responseType property.
//For the sake of example we are putting it into a blob and then copying the blob data into an arraybuffer.
xhr.responseType = "blob";

function analyze_data(blob)
{
var myReader = new FileReader();
myReader.readAsArrayBuffer(blob)

myReader.addEventListener("loadend", function(e)
{
var buffer = e.srcElement.result;//arraybuffer object
});
}

xhr.onload = function()
{
analyze_data(xhr.response);
}
xhr.send();

Intro of BLOB

URL.createObjectURL()

HTMLImageElement.src

Constructors

'text/plain'

'transparent'

'native'

Blob

blobParts

ArrayBuffer

ArrayBufferView

Blob

String

ending

'native'

'\r\n'

'\n'

var blob = new Blob(['foo', 'bar']);

console.log('size=' + blob.size); // result is size=6
console.log('type=' + blob.type);//result is type=

var testEndings = function(string, endings) {
var blob = new Blob([string], { type: 'plain/text',
endings: endings });
var reader = new FileReader();
reader.onload = function(event){
console.log(endings + ' of ' + JSON.stringify(string) +
' => ' + JSON.stringify(reader.result));
};
reader.readAsText(blob);
};

testEndings('foo\nbar',   'native');//result is native of "foo\nbar" => "foo\r\nbar"
testEndings('foo\r\nbar', 'native');//result is native of "foo\r\nbar" => "foo\r\nbar"
testEndings('foo\nbar',   'transparent');//result is transparent of "foo\nbar" => "foo\nbar"
testEndings('foo\r\nbar', 'transparent');//result is transparent of "foo\r\nbar" => "foo\r\nbar"

Instance Properties

Instance Methods

start

end - 1

this

start

end

this.size

end

this.size

type

contentType

''

var blob = new Blob(['foo', 'bar'], { type: 'plain/text',
endings: 'native' });
console.log('blob size:', blob.size); //result is blob size: 6
console.log('blob type:', blob.type);//result is blob type: plain/text

var copy = blob.slice()
console.log('copy size:', copy.size);//result is copy size: 6
console.log('copy type:', copy.type);//result is copy type:

var slice = blob.slice(1, 4, 'foo-type')
console.log('slice size:', slice.size);//resut is slice size: 3
console.log('slice type:', slice.type);//result is slice type: foo-type