In-depth analysis of the use of Blob objects in HTML5_html5 tutorial skills

The Blob object in HTML5 and the BLOB type in MYSQL are conceptually different. The BLOB type in MYSQL is just a binary data container. In addition to storing binary data, the Blob object 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 slightly earlier versions of modern browsers, this Blob object has not been standardized, so it needs to be created using BlobBuilder or the like. But now that Blob has been standardized to the point that it can be created directly by new its constructor Blob, and almost all browsers already support this method, so there is no need to worry about the old standard.

CSS CodeCopy content to clipboard

1. var data='Cobalt hypocarbonate' ;
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 rather strange. The first parameter is a set of data, so it must be an array. Even if there is only one string like the example above, a number must be used. Assemble it. The second parameter is the configuration attribute of this Blob object. Currently, there is only one type, which is the related MIME, that needs to be set. The key-value method may be for future expansion.
So, what is the use of making data into Blob? For Blob objects, we can create a URL to access it. Use the createObjectURL method of the URL object.

CSS CodeCopy content to clipboard

1. var data='Cobalt hypocarbonate' ;
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 text/html in the above example, but any type supported by the browser can be used in this way. Moreover, the life cycle of this Blob-URL is from creation to document release, which will not cause a waste of resources.
Blob is a very basic binary data object in HTML5. The operation parameters of many methods support the use of Blob. I can’t list them all. In short, almost all methods whose parameter type is binary data support using Blob as a parameter. Therefore, turning the data into Blob can make subsequent operations more convenient.

Method

slice()

Returns a new Blob object, containing the data within the specified range in the source Blob object.

CSS CodeCopy content to clipboard

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

Parameters
start optional
start index, can be a negative number, the syntax is similar to the slice method of array. The default value is 0.
end optional
end 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
MIME type of the new Blob object, this value will become the type attribute of the new Blob object Value, defaults to an empty string.
Return value
A new Blob object containing the data within the specified range in the source Blob object.
Note
If the value of the start parameter is greater than the source Blob If the value of the size attribute of the object is still large, the size value of the returned Blob object is 0, which means it does not contain any data.

BlobPropertyBag

An object containing two attributes type and endings.
type
sets the type attribute of the Blob object.
endings (deprecated)
corresponds to the BlobBuilder.append() method endings parameter. The value of this parameter can be "transparent" or "native".
Blob constructor usage example

The following code:

CSS CodeCopy content to clipboard

1. var aFileParts = ["hey!"];
2. var oMyBlob = new Blob(aFileParts, { "type" : "text/xml" }) ; // the blob

is equivalent to:

CSS CodeCopy content to clipboard

1. var oBuilder = new BlobBuilder();
2. var aFileParts = ["hey!" ];
3. oBuilder.append(aFileParts[0]);
4. var oMyBlob = oBuilder.getBlob("text/xml"); // the blob

The BlobBuilder interface provides another way to create Blob objects, but this method is now obsolete, so it should no longer be used.

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

CSS CodeCopy content to clipboard

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