浏览器适配：JPEG解析中Buffer转DataView的偏移问题及优化

问题1：为什么给j加2无法得到正确的偏移？ #

你的偏移计算逻辑完全错了：每次循环执行buffer = buffer.slice(i + 2)时，相当于从当前Buffer中跳过了整整i + 2个字节（整个当前块的全部内容），但你只给跟踪DataView偏移的j加了2，这根本没跟上实际跳过的字节数。

原代码里的i是当前块的长度字段值，而i + 2是整个块的总字节数（包含开头的标记和长度字段）。DataView是基于原始的ArrayBuffer创建的，它的偏移是相对于整个原始缓冲区的，所以每次迭代后，j应该加上i + 2，而不是只加2。你之前的操作导致后续读取的位置完全偏离了实际的块起始点，自然读出来的值全错。

问题2：如何不重复切片Buffer实现相同算法？ #

核心思路是用一个偏移变量跟踪当前读取位置，完全抛弃Buffer切片操作，直接通过DataView从原始ArrayBuffer中读取数据，这样既避免了切片带来的偏移混乱，也能同时兼容Node.js和浏览器环境。

改造后的代码示例：

function calculate(buffer) {
  // 统一转换成ArrayBuffer（Node.js Buffer和浏览器TypedArray都支持此操作）
  const arrayBuffer = buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
  const dataView = new DataView(arrayBuffer);
  let offset = 4; // 跳过前4字节签名

  while (offset < arrayBuffer.byteLength) {
    // 读取当前块的长度（大端字节序）
    const blockLength = dataView.getUint16(offset, false);
    // 合法性校验：防止块长度超出缓冲区范围
    if (offset + 2 + blockLength > arrayBuffer.byteLength) {
      throw new TypeError('Invalid JPG, corrupted block');
    }

    // 读取当前块的标记码（FF之后的字节）
    const marker = dataView.getUint8(offset + 1);
    // 检查是否是包含图像尺寸的SOF类标记
    if (marker === 0xC0 || marker === 0xC1 || marker === 0xC2) {
      // 从SOF段中读取高度和宽度（大端字节序）
      const height = dataView.getUint16(offset + 5, false);
      const width = dataView.getUint16(offset + 7, false);
      return { width, height };
    }

    // 跳到下一个块：当前偏移 + 2字节标记 + 块总长度（包含长度字段）
    offset += 2 + blockLength;
  }

  throw new TypeError('Invalid JPG, no size found');
}

改造要点说明： #

• 直接基于原始ArrayBuffer创建DataView，彻底避免切片带来的偏移混淆
• 用offset变量全程跟踪当前读取位置，每次迭代后按实际块长度更新偏移
• 直接从DataView读取标记码和尺寸，不需要再处理Buffer的切片操作
• 增加了块长度合法性校验，防止越界读取导致的错误

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