Learning notes for Blob objects in javaScript

Blob indicates binary raw data. A Blob object is a class file object containing read-only raw data.

APIs that inherit Blob functions include:

File object: processes binary data that exists in the File form, that is, operations on local files;
FileList object: webpage form interface of the File object;
FileReader object: reads binary data into memory;
URL object: used to generate a URL for binary data.
1. Create a Blob object

There are three methods to create Blob objects:

1) you can call the Blob constructor.
2) You can also use the slice () method on an existing Blob object to cut out another Blob object.
3) You can also call the toBlob () method on the canvas object.
1.1 create with Blob constructor:

The Blob constructor accepts two parameters. The first parameter is an array containing actual data, and the second parameter is of the data type. Both parameters are not required.

Var myBlob = new Blob (["Hello World"], "text/xml ");
1.2 create using slice:

The slice () method of the Blob object, which blocks binary data in bytes and returns a new Blob object.

Var newBlob = oldBlob. slice (startingByte, endindByte );
1.3 call the toBlob () method on the canvas object to create it:

Syntax:

Void canvas. toBlob (callback, type, encoderOptions)
The parameters of the canvas. toBlob () method are as follows:

Callback: the callback function. You can obtain a single Blob object parameter.
Type: [optional] specifies the image format of the DOMString type. The default format is image/png.
EncoderOptions: [optional] Number type. The value ranges from 0 to 1. This parameter is used to specify the image quality when the requested image format is image/jpeg or image/webp. If the value of this parameter is not within the specified type and range, the default value is used, and other parameters are ignored.
Example:

Var canvas = document. getElementById ("canvas ");

Canvas. toBlob (function (blob ){
Var newImg = document. createElement ("img "),
Url = URL. createObjectURL (blob );

NewImg. onload = function (){
// No longer need to read the blob so it's revoked
URL. revokeObjectURL (url );
};

NewImg. src = url;
Document. body. appendChild (newImg );
});
II. Attributes of Blob objects:

Attribute name type description
Size Long the length of the Blob object in bytes. Read-only.
The MIME type of the type DOMString Blob object. If it is an unknown type, an empty string is returned. Read-only.
3. Blob object method:

Slice (): returns a new Blob object that contains data within a specified range in the source Blob object.

The parameters of the slice () method are as follows:

Start [optional] start index, which can be a negative number. The syntax is similar to the slice method of the array. The default value is 0.
End [optional] end index, which 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 value of the type attribute of the new Blob object. The default value is an empty string.