WebSocket下如何从ArrayBuffer中提取原始二进制图像数据？

当WebSocket的binaryType设为arraybuffer后，你可以通过TypedArray视图直接操作原始数据，完全避免数据复制，效率比Blob.slice()高得多。具体步骤如下：

1. 读取首字节标识 #

用Uint8Array包装收到的ArrayBuffer，直接读取索引0的字节——这只是创建一个数据视图，不会复制原buffer：

// WebSocket消息回调中的处理逻辑
ws.onmessage = (event) => {
  const rawBuffer = event.data; // 收到的ArrayBuffer
  const fullView = new Uint8Array(rawBuffer);
  const flagByte = fullView[0]; // 获取首字节标识
};

2. 提取从第1字节开始的图像数据 #

通过subarray()方法或者直接指定TypedArray的偏移量，创建一个指向原buffer从索引1开始的视图，无数据复制：

// 方法1：用subarray截取（推荐，语义更清晰）
const imageDataView = fullView.subarray(1);

// 方法2：基于原buffer直接创建视图
// const imageDataView = new Uint8Array(rawBuffer, 1);

3. 转换为可显示的图像 #

把这个视图转换成Blob，再生成Object URL赋值给img元素即可显示：

// 根据实际传输的图像格式设置MIME类型，比如image/png、image/tiff等
const imageBlob = new Blob([imageDataView], { type: 'image/jpeg' });
const imageUrl = URL.createObjectURL(imageBlob);

// 渲染到页面
const scanImg = document.getElementById('scan-image');
scanImg.src = imageUrl;

// 图像加载完成后释放URL，避免内存泄漏
scanImg.onload = () => {
  URL.revokeObjectURL(imageUrl);
};

额外提示 #

• 如果首字节标识包含图像格式信息，可以用它动态设置Blob的type参数，适配不同类型的扫描图像。
• 若传输的是其他位深的数据（如16位灰度图），可替换为对应的TypedArray（如Uint16Array），同样通过指定字节偏移量跳过首字节，注意字节序匹配问题。

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