Binary large object blob in HTML5

The Blob object in HTML5 and the type of blob in MySQL are conceptually somewhat different. The blob type in MySQL is just a binary data container. The Blob object in HTML5 can also set the mine type of the data in addition to storing the binary data, which is equivalent to storing the file, and many other binary objects inherit from this object.

An Blob object is a class file object that contains read-only raw data. Blob The data in the object is not necessarily the native form in JavaScript. File The interface Blob is based on inherited Blob functionality, and the extension supports local files on the user's computer.

BlobThere are several ways to create an object, you can call the Blob constructor, you can also use one Blob of the existing objects to slice()方法 cut out another Blob object, and you can call canvas methods on the object toBlob .

Note:It is important to note that some browsers slice()方法Still prefixed with: Firefox 12 versions prior to blob.mozSlice(),On safari for blob.webkitSlice(). Note:Some browsers provide a BlobBuilderinterface, but not all browsers support BlobBuilder, and there are now BlobBuilderImplementations are prefixed. And, more important, BlobBuilder已经被废弃,你应该尽可能的使用 Blobconstructor to replace the. property

Property name	Type	Describe
size	unsigned long long	Blob对象中所包含数据的大小. read-only.
type	DOMString	A string that indicates the Blob对象所包含数据的MIME类型 . If the type is unknown, the value is an empty string. read-only.

constructor function

Blob blob (  [optional] Array parts,  [optional] blobpropertybag properties);

Parameters

parts

An array that contains the data to be added to Blob对象中的 . An array element can be any number of ArrayBuffer,ArrayBufferView (typed array), Blob or an DOMString object.

properties

an object that sets the Blob对象的一些属性 . View BlobPropertyBag section.

Method Slice ()

Returns a new Blob object that contains the source Blob对象中指定范围内的数据 .

Blob Slice (  Optional Long long start,  Optional Long long end,  optional domstring contentType};

Parameters

start options available

The start index, which can be negative, is syntactically similar to an array of slice methods. The default value is 0.

end options available

The end index, which can be a negative number, is syntactically similar to an array of slice methods. The default value is 最后一个索引 .

contentType options available

The

new Blob对象的MIME类型, value will be the new one Blob对象的 type属性的值,默认为一个空字符串 .

return value

A new Blob object that contains the source Blob对象中指定范围内的数据 .

Attention

If the start value of the parameter is greater than the source Blob对象的 size 属性的值还大 , the returned Blob object has a size value of 0, which means that it does not contain any data.

Blobpropertybag

An object that contains two attributes type endings .

type

Set the Blob对象的 type属性 .

endings(已废弃)

The

parameter that corresponds to the BlobBuilder.append() method. The endings value of this parameter can be "transparent" or "native".

Example of BLOB constructor usage

The following code:

var afileparts = ["<a id=\" a\ "><b id=\" b\ ">hey!<\/b><\/a>"]; var New // The blob

Equivalent to:

var New Blobbuilder (); var afileparts = ["<a id=\" a\ "><b id=\" b\ ">hey!<\/b><\/a>"];obuilder.append ( afileparts[0]); var // The blob

BlobBuilderThe interface provides another Blob way to create an object, but the method is now obsolete and should not be used.

Example: Creating an object URL using an array of types and Blob objects

var typedArray = getthetypedarraysomehow (); var New // passing in a suitable MIME type var url = url.createobjecturl (BLOB); // will produce a URL string similar to BLOB:D3958F5C-0777-0845-9DCF-2CB28783ACAF // you can use it as you would with a normal URL, such as on IMG.SRC.

Browser compatibility

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic Support	5	4	10	11.10	5.1
slice()	21st Ten webkit‡	13 5 moz‡	10	12	5.1 (534.29) WebKit
Blob()Constructor	20	13.0 (13.0)	10	12.10	6 (536.10)

Note: About the implementation of slice ()

slice()方法一开始Used to length来作为第二个参数 indicate the need to be new 的Blob对象拷贝多少个字节 . If you specify a parameter that start + length的值超过 has a source value Blob对象的长度 , the returned Blob object contains the from start索引到源 Blob对象结束索引处的所有数据 .

This version is slice() implemented in Firefox 4, WebKit, and Opera 11.10. However, since this syntax differs from our usual Array.slice() and String.slice() grammatical syntax, it has been deprecated. Gecko and WebKit currently support the new version of the slice syntax.

Starting with Gecko 13.0 (Firefox 13.0/thunderbird 13.0/seamonkey 2.10) and Chrome 21, slice() the prefix was removed. ‡

Gecko Notes

Before Gecko 12.0 (Firefox 12.0/thunderbird 12.0/seamonkey 2.9), the slice() method has a bug that the parameters start and end values cannot exceed the 64-bit unsigned range of numbers, and are now fixed.

Introduction to BLOB objects for HTML5

The Blob object in HTML5 and the type of blob in MySQL are conceptually somewhat different. The blob type in MySQL is just a binary data container. The Blob object in HTML5 can also set the mine type of the data in addition to storing the binary data, which is equivalent to storing the file, and many other binary objects inherit from this object.
In a slightly lower version of modern browsers, this Blob object is not yet normalized, so it needs to be created in such a way as Blobbuilder. But now that the BLOB has been normalized to be created directly from its constructor blob, and the browser has almost always supported this approach, there is no need to tangle with the old standard.
var data=‘<b style="font-size:32px;color:red;">次碳酸钴</b>‘;
var blob=new Blob([data],{"type":"text/html"});
console.log(blob);
This allows us to create a BLOB object, noting that the parameters of the Blob constructor are bizarre, the first parameter is a set of data, so it must be an array, even if only one string, like the example above, must be assembled in numbers. The second parameter is the configuration property for this Blob object, and currently there is only one type that is related to mime needs to be set, and the way to use Key-value is also for future expansion.
So what's the use of making data blobs? For BLOB objects, we can create a URL to access it. The Createobjecturl method that uses the URL object.var data=‘<b style="font-size:32px;color:red;">次碳酸钴</b>‘;
var blob=new Blob([data],{"type":"text/html"});
onload=function(){
  var iframe=document.createElement("iframe");
  iframe.src=URL.createObjectURL(blob);
  document.body.appendChild(iframe);
};
Not only the text/html in the above example, any browser-supported type can be used this way. And the life cycle of this blob-url is freed from creation to documentation and does not result in wasted resources.
Blob is a very basic binary data object in HTML5, the operation parameters of many methods support the use of blobs, which I can not enumerate. In summary, almost all methods that have parameter types that are binary data support the use of blobs as parameters. So making a blob of data makes it easier to do some of the subsequent columns.

Binary large Object blob in HTML5 (GO)