在JavaScript中如何将Octet-Stream原始字节转为8位灰度图并显示？

我尝试在JavaScript中从Octet-Stream显示图片。另一系统将10000张图片保存为单个二进制文件，前端通过偏移获取图片数据（例如直接获取第5000张），该数据是直接写入字节的原始数据，已知图片为200×720的8位灰度格式。

请问如何将这些数据读取为图片并显示？以下是我当前的尝试代码：

downloadImage(img_id: number): void {
    var range = "bytes=" + img_id * 144000 + "-" + ((img_id + 1) * 144000 - 1);
    fetch(this.signedUrl, {
      method: "GET",
      headers: {
        Range: range,
      },
    })
      .then((res) => {
        return res.blob();
      })
      .then((data) => {
        const img = new Image();

        img.src = URL.createObjectURL(data);

        // newer promise based version of img.onload
        img.onload = () => {
          console.log("Image decoded");
          this.currentImage = img;
        };

        img.onerror = (error) => {
          console.log("Error: ", error);
        };
}

这段代码总是触发onerror回调，且控制台日志未明确显示错误原因。

补充：使用FileReader查看Blob格式如下：
data:application/octet-stream;base64,end7dnZ4eHl3eHp4eXl......

代码报错的核心原因是：浏览器无法识别裸的8位灰度字节流为有效图片格式（比如PNG、JPG），必须先把这些原始数据转换为浏览器能解析的格式，或者通过Canvas直接绘制。

推荐方案：通过Canvas绘制原始灰度数据 #

这是最直接且高效的实现方式，无需额外转换为标准图片格式：

downloadImage(img_id: number): void {
    const pixelCount = 200 * 720;
    const range = `bytes=${img_id * pixelCount}-${(img_id + 1) * pixelCount - 1}`;
    
    fetch(this.signedUrl, { headers: { Range: range } })
      .then(res => res.arrayBuffer()) // 用arrayBuffer获取原始字节，而非Blob
      .then(buffer => {
        const canvas = document.createElement('canvas');
        canvas.width = 200;
        canvas.height = 720;
        const ctx = canvas.getContext('2d');
        if (!ctx) return;

        // 创建对应尺寸的ImageData对象
        const imageData = ctx.createImageData(canvas.width, canvas.height);
        const grayBytes = new Uint8Array(buffer);
        const rgbaData = imageData.data;

        // 将单通道灰度值映射为RGBA（R/G/B取灰度值，A设为255不透明）
        for (let i = 0; i < grayBytes.length; i++) {
          const rgbaIndex = i * 4;
          rgbaData[rgbaIndex] = grayBytes[i];     // 红色通道
          rgbaData[rgbaIndex + 1] = grayBytes[i]; // 绿色通道
          rgbaData[rgbaIndex + 2] = grayBytes[i]; // 蓝色通道
          rgbaData[rgbaIndex + 3] = 255;          // 透明度通道
        }

        // 将ImageData绘制到Canvas
        ctx.putImageData(imageData, 0, 0);

        // 把Canvas转为Image对象用于显示
        const img = new Image();
        img.src = canvas.toDataURL();
        img.onload = () => {
          console.log("Image decoded");
          this.currentImage = img;
        };
        img.onerror = (error) => console.error("Image conversion error: ", error);
      })
      .catch(fetchError => console.error("Fetch failed: ", fetchError));
}

关键说明 #

1. 替换Blob为ArrayBuffer：res.blob()会把数据封装为通用二进制对象，但浏览器无法识别其为图片；arrayBuffer()能让我们直接操作原始字节数据。
2. 灰度转RGBA：Canvas的ImageData要求每个像素用4字节的RGBA格式存储，因此需要把单字节的灰度值复制到R/G/B三个通道，同时设置透明度为255。
3. Range请求校验：你的字节范围计算是正确的（200×720=144000字节），这部分无需修改。

可选方案：封装为PNG格式 #

如果需要将数据保存为标准PNG文件，可以手动构建PNG的文件头、IHDR数据块、IDAT数据块等，但实现逻辑复杂，对于仅显示需求来说，Canvas方案足够高效。

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