Parse the usage of Blob objects in HTML5 in depth and parse html5blob objects

Parse the usage of Blob objects in HTML5 in depth and parse html5blob objects
This article mainly introduces how to parse Blob objects in HTML5. It is the basic knowledge in HTML5 beginners. For more information, see

Blob objects in HTML5 are conceptually different from BLOB types in MYSQL. The BLOB type in MYSQL is just a binary data container. In addition to storing binary data, Blob objects in HTML5 can also set the MINE type of this data, which is equivalent to storing files. Many other binary objects also inherit from this object.
In modern browsers of lower versions, this Blob Object has not been standardized, so it needs to be created in methods such as BlobBuilder. But now Blob has been standardized to be directly created by the new constructor Blob, and almost all browsers support this method, so there is no need to worry about the old standard.

Copy the content to the clipboard using CSS Code.

1. Var data = '<B style = "font-size: 32px; color: red;"> Cobalt Carbonate </B> ';
2. Var blob = new Blob ([data], {"type": "text/html "});
3. Console. log (blob );

In this way, we create a Blob Object. Note that the parameters of the Blob constructor are strange. The first parameter is a set of data, so it must be an array, even if there is only one string as in the above example, it must be assembled with numbers. The second parameter is the Configuration Attribute of this Blob Object. Currently, only one type, that is, the relevant MIME, needs to be set. The key-value method may be used for future expansion.
So what is the purpose of making data into Blob? FOR Blob objects, we can create a URL to access it. Use the createObjectURL method of the URL object.

Copy the content to the clipboard using CSS Code.

1. Var data = '<B style = "font-size: 32px; color: red;"> Cobalt Carbonate </B> ';
2. Var blob = new Blob ([data], {"type": "text/html "});
3. Onload = function (){
4. Var iframe = document. createElement ("iframe ");
5. Iframe. src = URL. createObjectURL (blob );
6. Document. body. appendChild (iframe );
7. };

Not only is text/html in the preceding example supported by any browser. In addition, the life cycle of this Blob-URL is from creation to release of documents, without wasting resources.
Blob is a basic binary data object in HTML5. the operation parameters of many methods support Blob. In short, almost all methods that use binary data of the parameter type support using Blob as the parameter. Therefore, making data Blob makes some subsequent column operations more convenient.

Method

Slice ()

Returns a new Blob Object that contains data within a specified range in the source Blob Object.

Copy the content to the clipboard using CSS Code.

1. Blob slice (
2. Optional long start,
3. Optional long end,
4. Optional DOMString contentType
5. };

Parameters
Start (optional)
Start index, which can be negative. The syntax is similar to the slice Method of the array. The default value is 0.
End (optional)
The ending index can be a negative number. The syntax is similar to the slice Method of the array. The default value is the last index.
ContentType (optional)
The MIME type of the new Blob Object. This value will become the value of the type attribute of the new Blob Object. The default value is an empty string.
Return Value
A new Blob Object contains data within the specified range of the source Blob Object.
Note:
If the value of the start parameter is greater than the value of the size attribute of the source Blob Object, the returned Blob Object size value is 0, that is, it does not contain any data.

BlobPropertyBag

An object that contains two attributes: type and endings.
Type
Set the type attribute of the Blob Object.
Endings (obsolete)
The endings parameter corresponding to the BlobBuilder. append () method. The value of this parameter can be "transparent" or "native ".
Usage example of Blob Constructor

The following code:

Copy the content to the clipboard using CSS Code.

1. Var aFileParts = ["<a id = \" a \ "> <B id = \" B \ "> hey! <\/B> <\/a> "];
2. Var oMyBlob = new Blob (aFileParts, {"type": "text \/xml"}); // the blob

 
It is equivalent:

Copy the content to the clipboard using CSS Code.

1. Var oBuilder = new BlobBuilder ();
2. Var aFileParts = ["<a id = \" a \ "> <B id = \" B \ "> hey! <\/B> <\/a> "];
3. OBuilder. append (aFileParts [0]);
4. Var oMyBlob = oBuilder. getBlob ("text \/xml"); // the blob

 
The BlobBuilder interface provides another method for creating Blob objects. However, this method is not used anymore.

Example: Create an object URL using a type array and Blob Object

Copy the content to the clipboard using CSS Code.

1. Var typedArray = GetTheTypedArraySomehow ();
2. Var blob = new Blob ([typedArray], {type: "application/octet-binary"}); // input a suitable MIME type
3. Var url = URL. createObjectURL (blob );
4. // A URL string like blob: d3958f5c-0777-0845-9dcf-2cb28783acaf will be generated
5. // You can use it like a normal URL, for example, on img. src.