Deeply analyze the use of blob objects in HTML5

Time:2021-12-4

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, 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 earlier versions of modern browsers, this blob object has not been standardized, so it needs to be created in ways such as blobbuilder. But now blob has been standardized so that it can be directly created by new its constructor blob, and almost all browsers have supported this method, so there is no need to tangle with the old standard.

CSS CodeCopy contents to clipboard
  1. var data=‘<b   Style = “font size: 32px; color: red;” > cobalt hypocarbonate < / 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 group of data, so it must be an array. Even if there is only one string like the above example, it must be packed with an array. The second parameter is the configuration attribute of this blob object. At present, there is only one type, that is, the related mime needs to be set. The use of key value may be for future expansion.
So what’s the use of making data into blobs? For blob objects, we can create a URL to access it. Use the createobjecturl method of the URL object.

CSS CodeCopy contents to clipboard
  1. var data=‘<b   Style = “font size: 32px; color: red;” > cobalt hypocarbonate < / 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. };  

This is not only the text / HTML in the above example, but also any type supported by the browser. 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, which I can’t list. In short, almost all methods whose parameter type is binary data support blob as a parameter. Therefore, making the data into blob can make some column operations more convenient.

method

slice()

Returns a new blob object containing the data within the specified range in the source blob object

CSS CodeCopy contents to clipboard
  1. Blob slice(   
  2.   optional long long start,   
  3.   optional long long end,   
  4.   optional DOMString contentType   
  5. };  

parameter
Start optional
The start index can be a negative number. The syntax is similar to the slice method of the array. The default value is 0
End optional
The 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
The MIME type of the new blob object. This value will become the value of the type attribute of the new blob object. By default, it is an empty string
Return value
A new blob object that contains data within the specified range of the source blob object
be careful
If the value of the start parameter is greater than the value of the size attribute of the source blob object, the size value of the returned blob object 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)
Corresponds to the endings parameter of blobbuilder. Append() method. The value of this parameter can be “transparent” or “native”
Blob constructor usage example

The following code:

CSS CodeCopy contents to clipboard
  1. var aFileParts = [“<a id=\”a\”><b id=\”b\”>hey!<\/b><\/a>”];   
  2. var oMyBlob = new Blob(aFileParts, { “type” : “text\/xml” }); // the blob  

 
Equivalent to:

CSS CodeCopy contents to clipboard
  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 way to create blob objects, but this method is now obsolete and should no longer be used

Example: create an object URL using type array and blob object

CSS CodeCopy contents 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. //   A URL string like blob: d3958f5c-0777-0845-9dcf-2cb28783acaf will be generated
  5. //   You can use it like a normal URL, such as imgsrcGo ahead