React Native 如何读取包含JPG的二进制文件的头部额外信息？

注：以下方案默认你在写入二进制文件头部时，每个字段均采用4字节无符号整数存储，端序统一为小端序（如果你用的是大端序，后续代码里把getUint32的第二个参数改成false即可）。4个字段总占用16字节文件头部。

实现步骤 #

1. 将获取到的Blob对象转换为ArrayBuffer，用来逐字节读取内容
2. 使用DataView实例操作ArrayBuffer，按偏移量读取头部的四个整数字段

// 假设你已经拿到了下载后的Blob对象，命名为binaryBlob
const readBinaryHeader = async (binaryBlob) => {
  // 1. 转换为ArrayBuffer
  const buffer = await binaryBlob.arrayBuffer();
  // 2. 初始化DataView用于按规则读取二进制内容
  const dataView = new DataView(buffer);
  // 偏移量初始为0，每读取一个4字节整数，偏移量+4
  let offset = 0;
  // 读取JPG总数量
  const jpgCount = dataView.getUint32(offset, true);
  offset += 4;
  // 读取第一张图片大小
  const firstJpgSize = dataView.getUint32(offset, true);
  offset += 4;
  // 读取第二张图片大小
  const secondJpgSize = dataView.getUint32(offset, true);
  offset += 4;
  // 读取第三张图片大小
  const thirdJpgSize = dataView.getUint32(offset, true);
  offset += 4;

  // 后续如果要提取JPG文件，从当前offset位置开始按对应大小截取Buffer即可
  return {
    jpgCount,
    firstJpgSize,
    secondJpgSize,
    thirdJpgSize
  }
}

// 调用示例
const headerInfo = await readBinaryHeader(yourBlobObj);
console.log(headerInfo);

兼容与适配说明 #

• 如果你的头部字段不是用4字节无符号整数存储，比如用的是2字节的Uint16，只需要把getUint32改成getUint16，每次偏移量加2即可
• 必须确认写入文件时的端序，读写端序保持一致才能得到正确的数值
• 如果React Native版本较低不支持Blob的arrayBuffer()方法，可以用FileReader实现转换：

const buffer = await new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.onerror = reject;
  reader.readAsArrayBuffer(binaryBlob);
});

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