Base64解码后Float32Array长度变长，求问题排查方法

你的问题核心是编码时错误地使用了Float32Array的整个底层ArrayBuffer，而非仅它实际占用的字节范围。很多情况下，Float32Array可能只是一个更大ArrayBuffer的视图（比如存在byteOffset，或是Buffer被其他类型数组共享），直接编码整个Buffer会把多余的字节也包含进去，导致解码后生成的Float32Array长度超出预期。

错误分析 #

你当前的代码：

var base64String = encode(new Uint8Array(pcdRef.current.buffer));

这里的pcdRef.current.buffer是Float32Array的底层Buffer，但这个Buffer的字节长度可能远大于pcdRef.current.length * 4（每个Float32元素占4字节），编码时把Buffer中所有字节都转成了Base64，解码后自然会得到更长的数组。

修复方案 #

1. 编码时仅截取Float32Array实际占用的字节

创建Uint8Array时，明确指定Float32Array对应的byteOffset和byteLength，只编码需要的部分：

const floatArray = pcdRef.current;
// 仅编码Float32Array覆盖的字节范围
const uint8View = new Uint8Array(
  floatArray.buffer,
  floatArray.byteOffset,
  floatArray.byteLength
);
const base64String = encode(uint8View);

2. 解码时精准还原Float32Array

解码后，通过Uint8Array的字节长度计算出正确的Float32Array长度，避免依赖整个Buffer的长度：

const decodedUint8 = decode(base64String);
// 字节长度除以4（每个Float32占4字节）得到正确数组长度
const rehydratedArray = new Float32Array(
  decodedUint8.buffer,
  decodedUint8.byteOffset,
  decodedUint8.byteLength / 4
);

console.log("original length = " + floatArray.length + ", rehydrated length = " + rehydratedArray.length);

额外验证 #

你可以先打印原Float32Array的底层Buffer信息，确认是否存在多余字节：

console.log("Float32Array byteLength:", pcdRef.current.byteLength);
console.log("Buffer total byteLength:", pcdRef.current.buffer.byteLength);

如果两者数值不同，就说明Buffer存在多余字节，这正是导致问题的原因。

内容的提问来源于stack exchange，提问作者Joe