夜间模式
JavaScript 二进制数组（应用）
AJAX
XMLHttpRequest 第一版 responseType 属性默认为 text。
XMLHttpRequest 第二版 XHR2 允许服务器返回二进制数据，这时分成两种情况：
- 已知二进制数据类型：responseType 设为 arraybuffer。
- 未知二进制数据类型：responseType 设为 blob。
javascript
var xhr = new XMLHttpRequest();
xhr.open("GET", someUrl);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
let arrayBuffer = xhr.response;
// ···
};
xhr.send();var xhr = new XMLHttpRequest();
xhr.open("GET", someUrl);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
let arrayBuffer = xhr.response;
// ···
};
xhr.send();Canvas
首先看下面的例子：
javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var uint8ClampedArray = imageData.data; // Canvas 元素输出的二进制像素数据，也是 TypedArray 数组var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var uint8ClampedArray = imageData.data; // Canvas 元素输出的二进制像素数据，也是 TypedArray 数组需要注意的是：Uint8ClampedArray 这个类型是针对 Canvas 元素的专有类型，它是专门针对颜色，取值只能是 0~255。
WebSocket
WebSocket 可以通过 ArrayBuffer，发送或接收二进制数据。
javascript
var socket = new WebSocket("ws://127.0.0.1:8081");
socket.binaryType = "arraybuffer";
// 等待直到 socket 打开
socket.addEventListener("open", function (event) {
// 发送二进制数据
var typedArray = new Uint8Array(4);
socket.send(typedArray.buffer);
});
// 接受二进制数据
socket.addEventListener("message", function (event) {
var arrayBuffer = event.data;
// ···
});var socket = new WebSocket("ws://127.0.0.1:8081");
socket.binaryType = "arraybuffer";
// 等待直到 socket 打开
socket.addEventListener("open", function (event) {
// 发送二进制数据
var typedArray = new Uint8Array(4);
socket.send(typedArray.buffer);
});
// 接受二进制数据
socket.addEventListener("message", function (event) {
var arrayBuffer = event.data;
// ···
});Fetch API
Fetch API 取回的数据，就是 ArrayBuffer 对象。
javascript
fetch(url)
.then(function (request) {
return request.arrayBuffer();
})
.then(function (arrayBuffer) {
// ...
});fetch(url)
.then(function (request) {
return request.arrayBuffer();
})
.then(function (arrayBuffer) {
// ...
});File API
如果知道一个文件的二进制数据类型，也可以将这个文件读取为 ArrayBuffer 对象。
javascript
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
var arrayBuffer = reader.result;
// ···
};var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
var arrayBuffer = reader.result;
// ···
};