如何在React项目中读取已上传PNG文件内嵌的JSON元数据？

核心实现逻辑 #

首先明确：PNG格式的自定义元数据一般存储在非像素段的文本块中（常见为iTXt/tEXt块），这类块和像素数据段相互独立，不需要解码整张图片的像素内容就能直接读取，完全可以在现有上传流程中完成，不需要改动你已经实现的base64存储、图片预览的基础逻辑。

具体改造步骤 #

• 兼容现有文件读取流程：在你拿到用户选中的File对象后，除了现有的通过FileReader.readAsDataURL转base64的逻辑，额外通过file.arrayBuffer()方法获取文件原始二进制流，用于后续解析元数据，这个操作是异步的，和你现有转base64的流程可以并行执行，不会阻塞原有逻辑。
• 实现PNG块结构解析：按照PNG的固定块格式逐段遍历，定位存储自定义JSON的文本块，核心解析规则非常简单：
  1. 先校验文件开头的8字节PNG固定签名，排除非PNG文件的异常场景
  2. 逐块读取：每个PNG块的结构固定为「4字节块长度 + 4字节块类型标识 + N字节块内容 + 4字节CRC校验」，按照这个结构逐段偏移遍历，直到找到对应类型的文本块
  3. 拿到目标块的内容段后，根据当初写入元数据时用的编码（iTXt是UTF-8、tEXt是Latin1）把二进制转成字符串，直接解析为JSON即可拿到结构化的元数据。
• 状态合并存储：把解析到的元数据和原来存的base64图片数据一起存在React组件状态里，后续的图片展示、提交上传的逻辑完全不需要调整。

可直接复用的核心解析代码 #

async function extractPngCustomMeta(file) {
  const buffer = await file.arrayBuffer();
  const dataView = new DataView(buffer);
  // 校验PNG文件签名
  const SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10];
  for (let i = 0; i < 8; i++) {
    if (dataView.getUint8(i) !== SIGNATURE[i]) {
      throw new Error('上传文件不是合法PNG格式');
    }
  }
  let offset = 8;
  while (offset < buffer.byteLength) {
    const chunkLength = dataView.getUint32(offset);
    const chunkType = String.fromCharCode(
      dataView.getUint8(offset + 4),
      dataView.getUint8(offset + 5),
      dataView.getUint8(offset + 6),
      dataView.getUint8(offset + 7)
    );
    // 匹配存JSON的iTXt块（根据你当初嵌入时的块类型调整）
    if (chunkType === 'iTXt') {
      const content = new TextDecoder('utf-8').decode(
        new Uint8Array(buffer, offset + 8, chunkLength)
      );
      // iTXt块内容格式：[关键字]\0[压缩标志]\0[压缩方法]\0[语言标签]\0[翻译关键词]\0[实际内容]
      const contentParts = content.split('\0');
      const jsonContent = contentParts[contentParts.length - 1];
      return JSON.parse(jsonContent);
    }
    // 偏移到下一个块的起始位置
    offset = offset + 4 + 4 + chunkLength + 4;
  }
  return null;
}

注意事项 #

• 如果你当初嵌入元数据用的是tEXt块，只要把代码里的解码逻辑换成latin1编码即可，不要用UTF-8解码，否则会出现乱码。
• 不要试图直接从已经存在状态里的base64字符串里解析元数据，虽然base64转二进制也能解析，但额外多了一层编解码的耗时，不如在上传拿到File对象的时候直接并行读ArrayBuffer和base64两个数据，效率更高。
• 整个解析过程纯浏览器端运行，不需要把文件上传到服务端处理，也不需要引入重的PNG解析第三方库（因为你不需要解码像素数据，仅遍历文本块的代码量不到100行，不会增加项目体积）。
• 解析逻辑完全不影响你现有的base64预览逻辑，两个操作并行执行的总耗时和原来单存base64的耗时几乎没有差别。

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