相关文档可以大概预览一下,不需要刻意记住。
- MDN Web Docs - File
- MDN Web Docs - Blob
- MDN Web Docs - Workers
- MDN Web Docs - FileReader
- MDN Web Docs - HTMLCanvasElement
- MDN Web Docs - URL.createObjectURL
- MDN Web Docs - URL.revokeObjectURL
- MDN Web Docs - TextEncoder
网页不像Nodejs
,可以接触到二进制数据的情况并不多,简单概括下几种情况。
let xhr = new XMLHttpRequest();
xhr.open("GET", someUrl);
xhr.responseType = "arraybuffer";
xhr.onload = function() {
let uint8 = new Uint8Array(xhr.response);
console.log(uint8);
};
xhr.send();
fetch(someUrl)
.then(function(response) {
return response.arrayBuffer();
})
.then(function(arrayBuffer) {
let uint8 = new Uint8Array(arrayBuffer);
console.log(uint8);
});
let socket = new WebSocket(someUrl);
socket.binaryType = "arraybuffer";
socket.onmessage = function(e) {
let uint8 = new Uint8Array(e.data);
console.log(uint8);
};
socket.send();
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const uint8ClampedArray = imageData.data;
const fileInput = document.getElementById("fileInput");
const file = fileInput.files[0];
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function() {
let uint8 = new Uint8Array(reader.result);
console.log(uint8);
};