JS解析PNG文件Uint8Array时IHDR宽度值读取结果异常

解析错误来自三点：字节偏移读取位置错误、多字节整数解析逻辑错误、混淆了不同工具的索引计数规则。

1. 标准PNG字节结构（JS数组默认0基索引） #

PNG文件开头的字节排布是固定的：

• 0~7位：共8字节，为PNG固定文件签名，值恒为[137, 80, 78, 71, 13, 10, 26, 10]
• 8~11位：共4字节，为IHDR块的长度字段，是大端格式无符号整数，固定值为13（十六进制0x0000000D），代表IHDR块正文长度为13字节
• 12~15位：共4字节，为IHDR块的类型标识，对应ASCII字符IHDR，其中索引15位是字符R，ASCII码值为82——这就是你截取的数组第一个值为82的原因，你切到的起始位置正好是IHDR类型标识的最后一位
• 16~28位：共13字节，为IHDR块的正文内容：
  • 16~19位：4字节大端无符号整数，即图像宽度字段
  • 20~23位：4字节大端无符号整数，即图像高度字段
  • 剩余5字节存储位深、颜色类型、压缩方式等参数

你使用的PNG块检测站点的字节索引是从1开始计数的，和JS数组的0基规则差1位偏移，它显示的15_{28位对应JS数组的14}27位，开头的00 00 00 0D是IHDR块的长度字段，不是宽度字段，从这里取值自然得不到正确结果。

2. 多字节整数不能直接按字节求和 #

PNG中所有多字节数值都是大端序整数，需要按位权移位拼接计算，不能直接把每个字节的数值相加。
以256px宽度为例，对应的4字节值为[0, 0, 1, 0]，正确计算逻辑：

// widthBytes为宽度字段对应的4字节Uint8Array片段
const width = (widthBytes[0] << 24) | (widthBytes[1] << 16) | (widthBytes[2] << 8) | widthBytes[3]
// 代入值计算：0*16777216 + 0*65536 + 1*256 + 0 = 256，结果正确

如果直接对四个字节求和，得到的结果是1，和实际值完全无关。你之前算出的83、13都是错误位置的字节求和结果，没有实际意义。

3. 最简修正方案 #

直接用JS内置DataView解析可以避免手动计算偏移、移位的错误，示例代码：

// pngBuffer 为后端返回的PNG文件对应的ArrayBuffer对象
const dataView = new DataView(pngBuffer);
// 宽度位于0基索引16位置，4字节大端无符号整数，第二个参数false指定大端序
const imgWidth = dataView.getUint32(16, false);
// 高度位于0基索引20位置
const imgHeight = dataView.getUint32(20, false);
console.log(imgWidth, imgHeight); // 可正确输出256及对应高度值

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