base64 编解码 float32array 时出现长度不一致，根本原因在于直接使用 `.buffer` 忽略了 `byteoffset` 和 `bytelength`，导致编码了超出视图范围的内存区域。
在 JavaScript 中，Float32Array 是一个 TypedArray 视图（view），它并不拥有底层 ArrayBuffer 的全部内容，而是以指定偏移量（byteOffset）和字节长度（byteLength）映射其中一段内存。当你直接访问 float32Array.buffer 并构造 Uint8Array(buffer) 时，你实际上获取的是整个 ArrayBuffer 的字节视图——而不仅仅是该 Float32Array 实际覆盖的部分。
这会导致两个严重问题：
- ✅ 编码阶段：多编码了无关字节（如前导填充、其他视图数据或未初始化内存）；
- ❌ 解码阶段：还原出的 Uint8Array 比原始 Float32Array 对应的字节更多 → 构造新 Float32Array(view.buffer) 时，.length 自动按 buffer.byteLength / 4 计算，结果必然偏大（如你观察到的 76800 → 77284）。
正确做法：精确提取有效字节范围
必须显式传入 byteOffset 和 byteLength，确保仅编码 Float32Array 实际占用的字节段：
// ✅ 正确：仅编码 Float32Array 所对应的字节区间
const uint8View = new Uint8Array(
pcdRef.current.buffer,
pcdRef.current.byteOffset,
pcdRef.current.byteLength // = pcdRef.current.length * 4
);
const base64String = encode(uint8View); // 使用任意 Base64 编码函数（如 btoa 或 stablelib）
// ✅ 解码后，也需用相同逻辑重建 Float32Array
const decodedBytes = decode(base64String); // 返回 Uint8Array
const rehydrated = new Float32Array(
decodedBytes.buffer,
decodedBytes.byteOffset,
decodedBytes.byteLength / Float32Array.BYTES_PER_ELEMENT
);
console.log("original length =", pcdRef.current.length);
console.log("rehydrated length =", rehydrated.length); // 现在严格相等⚠️ 注意事项
- Float32Array.BYTES_PER_ELEMENT === 4，因此 byteLength = length * 4，但*不可反向假设 `buffer.byteLength === length 4`** —— 因为 buffer 可能更大（如共享 ArrayBuffer、多视图共存）。
- 若你使用 btoa() + Uint8Array，需先将字节转为字符串（常见于 String.fromCharCode(...)），但更推荐使用现代 TextEncoder/atob 组合或成熟库（如 stablelib/base64），它们原生支持 Uint8Array。
- Web API 接收端解码时，同样必须用 decodedBytes.byteLength / 4 计算 Float32Array 长度，而非 decodedBytes.buffer.byteLength / 4。
总结
长度失真的本质是「视图」与「缓冲区」概念混淆。TypedArray 的安全性与灵活性正源于其对底层 ArrayBuffer 的受控切片能力——而 Base64 编解码必须尊重这一切片边界。始终使用 new Uint8Array(buffer, byteOffset, byteLength) 替代 new Uint8Array(buffer)，即可彻底解决该问题。
