A brief discussion on the binary family of JS

Overview

Blob: A binary object on the front end specifically used to support file operations

ArrayBuffer: A generic binary buffer on the front end, similar to an array, but with many differences in API and features

Buffer: A binary buffer provided by Node.js, often used to handle I/O operations

Blob

Let's first introduce Blob, which is used to support file operations. Simply put: In JS, there are two constructors File and Blob, and File inherits all the properties of Blob.

So from our point of view, the File object can be regarded as a special Blob object.

In front-end engineering, in which operations can we obtain File objects? Please see:

(Note: The current status of the File API specification is Working Draft)

As we said above, the File object is a special Blob object, so it can naturally call the methods of the Blob object directly. Let's take a look at the specific methods of Blob and what functions can be achieved with them

Blob in Action

A blob can be converted into a Blob URL through the window.URL.createObjectURL method, and used as a link for file download or image display.

The downloading or displaying functions implemented by the Blob URL can only be performed within a single browser. It cannot be stored on the server, or it has no meaning to be stored on the server.

Here is an example of a Blob, you can see it is very short

blob:d3958f5c-0777-0845-9dcf-2cb28783acaf

Compared to the lengthy Base64 format Data URL, the length of the Blob URL is obviously not enough to store enough information, which means it is just like a "reference" inside the browser. From this perspective, Blob URL is a pseudo-protocol developed by the browser itself.

Blob download file

We can receive a Blob (File) object through window.URL.createObjectURL, convert it into a Blob URL, and then assign it to the a.download property, and then click this link on the page to download it.

<!-- html part -->
<a id="h">Click here to download</a>
<!-- js part -->
<script>
  var blob = new Blob(["Hello World"]);
  var url = window.URL.createObjectURL(blob);
  var a = document.getElementById("h");
  a.download = "helloworld.txt";
  a.href = url;
</script>

Note: The download attribute is not compatible with IE. You can optimize IE through the window.navigator.msSaveBlob method or other methods (IE10/11)

Operation Results

Blob image local display

The Blob URL generated by window.URL.createObjectURL can also be assigned to img.src to display the image.

<!-- html part -->
<input type="file" id='f' />
<img id='img' style="width: 200px;height:200px;" />
<!-- js part -->
<script>
  document.getElementById('f').addEventListener('change', function (e) {
    var file = this.files[0];
    const img = document.getElementById('img');
    const url = window.URL.createObjectURL(file);
    img.src = url;
    img.onload = function () {
        // Release a URL object previously created by calling URL.createObjectURL window.URL.revokeObjectURL(url);
    }
  }, false);
</script>

Operation Results

Blob file upload

• Blob.slice(start,end) can be used to split a large Blob into multiple small Blobs
• xhr.send can directly send Blob objects

front end

<!-- html part -->
<input type="file" id='f' />
<!-- js part -->
<script>
  function upload(blob) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/ajax', true);
    xhr.setRequestHeader('Content-Type', 'text/plain')
    xhr.send(blob);
  }
  document.getElementById('f').addEventListener('change', function (e) {
    var blob = this.files[0];
    const CHUNK_SIZE = 20; .
    const SIZE = blob.size;
    var start = 0;
    var end = CHUNK_SIZE;
    while (start < SIZE) {
        upload(blob.slice(start, end));
        start = end;
        end = start + CHUNK_SIZE;
    }
  }, false);
</script>

Node

app.use(async (ctx, next) => {
    await next();
    if (ctx.path === '/ajax') {
        const req = ctx.req;
        const body = await parse(req);
        ctx.status = 200;
        console.log(body);
        console.log('---------------');
    }
});

File Contents

According to the Zhanjiang commerce bureau, the actual amount of foreign capital utilized in Zhanjiang from January to October this year was

Operation Results

Read file contents locally

If you want to read a Blob or file object and convert it into data in other formats, you can use the API of the FileReader object to operate

• FileReader.readAsText(Blob): Converts a Blob into a text string
• FileReader.readAsArrayBuffer(Blob): Convert Blob to ArrayBuffer format data
• FileReader.readAsDataURL(): Converts a Blob to a Data URL in Base64 format

Next, we try to read the contents of a file as a string.

<input type="file" id='f' />


document.getElementById('f').addEventListener('change', function (e) {
    var file = this.files[0];
    const reader = new FileReader();
    reader.onload = function () {
        const content = reader.result;
        console.log(content);
    }
    reader.readAsText(file);
}, false);

Operation Results

The above introduces the usage of Blob. It is not difficult to find that Blob is for files, or it can be said that it is a file object. At the same time, we find that Blob lacks the ability to operate on the details of binary data. For example, if you want to modify a part of the binary data, Blob is obviously not enough. This fine-grained function can be completed by ArrayBuffer introduced below.

ArrayBuffer

Let's take a look at the general functionality of ArrayBuffer in a diagram.

At the same time, it should be noted that ArrayBuffer is very different from the native JS array, as shown in the figure

The following is a detailed introduction one by one

Read local data in ArrayBuffer format

document.getElementById('f').addEventListener('change', function (e) {
  const file = this.files[0];
  const fileReader = new FileReader();
  fileReader.onload = function () {
    const result = fileReader.result;
    console.log(result)
  }
  fileReader.readAsArrayBuffer(file);
}, false);

Operation Results

Read Ajax request data in ArrayBuffer format

Specify the data type of the response via xhr.responseType = "arraybuffer"

Print xhr.response in onload callback

front end

const xhr = new XMLHttpRequest();
xhr.open("GET", "ajax", true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
    console.log(xhr.response)
}
xhr.send();

Node

const app = new Koa();
app.use(async (ctx) => {
  if (pathname = '/ajax') {
        ctx.body = 'hello world';
        ctx.status = 200;
   }
}).listen(3000)

Operation Results

Writing to ArrayBuffer via TypeArray

const typedArray1 = new Int8Array(8);
typedArray1[0] = 32;

const typedArray2 = new Int8Array(typedArray1);
typedArray2[1] = 42;
 
console.log(typedArray1);
// output: Int8Array [32, 0, 0, 0, 0, 0, 0, 0]
 
console.log(typedArray2);
// output: Int8Array [32, 42, 0, 0, 0, 0, 0, 0]

Writing to ArrayBuffer via DataView

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);
view.setInt8(2, 42);
console.log(view.getInt8(2));
// Output: 42

Buffer

Buffer is an object provided by Node.js, which is not available on the front end. It is generally used for IO operations. For example, when receiving front-end request data, the received front-end data can be integrated through the following Buffer API.

Buffer in Action

Here are some examples:

Node side (Koa)

const app = new Koa();
app.use(async (ctx, next) => {
    if (ctx.path === '/ajax') {
        const chunks = [];
        const req = ctx.req;
        req.on('data', buf => {
            chunks.push(buf);
        })
        req.on('end', () => {
            let buffer = Buffer.concat(chunks);
            console.log(buffer.toString())
        })
    }
});
app.listen(3000)

front end

const xhr = new XMLHttpRequest();
xhr.open("POST", "ajax", true);
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.send("asdasdsadfsdfsadasdas");

Operation Results

Node output

asdasdsadfsdfsadasdas

The above is a brief discussion of the details of JS's binary family. For more information about JS's binary family, please pay attention to other related articles on 123WORDPRESS.COM!