TypedArray 与 DataView 解析二进制文件格式

脱离字符串处理，直接操作二进制缓冲区，解析 BMP 图片或自定义二进制协议，掌握 endianness 和字节对齐技巧。 · 难度：入门 · +10XP

TypedArray 与 DataView 解析二进制文件格式

ArrayBuffer 加上 TypedArray 或 DataView 可以精确控制字节级别。本教程以解析简单 BMP 文件头为例：读取文件头判断位深、宽度、高度。展示如何用 Uint8Array 读取原始字节，用 DataView 读取 16 位和 32 位整数值（处理小端/大端）。最后演示如何将像素数据绘制到 Canvas 上。

async function parseBMP(url) { const buf = await fetch(url).then(r => r.arrayBuffer()); const view = new DataView(buf); const fileSize = view.getUint32(2, true); // 小端 const width = view.getInt32(18, true); const height = view.getInt32(22, true); const bitsPerPixel = view.getUint16(28, true); console.log(大小:${fileSize} 宽:${width} 高:${height} 位深:${bitsPerPixel}); }