如何不使用Canvas，直接将Uint8Array在img标签中显示为图片？

我有一个名为frameBytes的Uint8Array，之前通过以下代码将其转换为RGBA值并显示在Canvas上，最终把Canvas内容放到img标签中：

// 将frameBytes转换为RGBA
for (var i = 0; i < frameBytes.length; i++) {
  imgData.data[4 * i] = frameBytes[i];// red
  imgData.data[4 * i + 1] = frameBytes[i]; // green
  imgData.data[4 * i + 2] = frameBytes[i];// blue
  imgData.data[4 * i + 3] = 255; // alpha
}

// 显示到Canvas
var ctx = fingerFrame.getContext('2d');
var imgData = ctx.createImageData(fingerFrame.width, fingerFrame.height);
ctx.putImageData(imgData, 0, 0, 0, 0, fingerFrame.width, fingerFrame.height);

// 放入img标签
const img = document.getElementById('i');
img.src = fingerFrame.toDataURL();

但我不想使用Canvas，希望直接从Uint8Array在img标签中显示图片，请问该如何实现？

很高兴帮你解决这个问题！要跳过Canvas直接将你的灰度Uint8Array显示在img标签中，有两种可行的方案，你可以根据自己的需求来选：

方案一：使用OffscreenCanvas（轻量无DOM依赖） #

虽然这还是用到了Canvas API，但它是离屏Canvas——完全在内存中处理，不需要在DOM里创建可见的Canvas元素，应该能满足你不想用原Canvas流程的需求。具体步骤如下：

// 先确认图像的宽高（和你之前用的fingerFrame宽高一致）
const width = fingerFrame.width;
const height = fingerFrame.height;

// 创建离屏Canvas并获取上下文
const offscreenCanvas = new OffscreenCanvas(width, height);
const ctx = offscreenCanvas.getContext('2d');
const imgData = ctx.createImageData(width, height);

// 填充RGBA数据，逻辑和你原来的循环完全一致
for (let i = 0; i < frameBytes.length; i++) {
  const baseIndex = 4 * i;
  imgData.data[baseIndex] = frameBytes[i];     // 红色通道
  imgData.data[baseIndex + 1] = frameBytes[i]; // 绿色通道
  imgData.data[baseIndex + 2] = frameBytes[i]; // 蓝色通道
  imgData.data[baseIndex + 3] = 255;           // 完全不透明的alpha通道
}

// 绘制数据并生成可给img用的Blob URL
ctx.putImageData(imgData, 0, 0);
offscreenCanvas.convertToBlob({ type: 'image/png' })
  .then(blob => {
    const img = document.getElementById('i');
    // 生成URL并赋值给img
    img.src = URL.createObjectURL(blob);
    // 图片加载完成后记得释放URL，避免内存泄漏
    img.onload = () => URL.revokeObjectURL(img.src);
  });

方案二：手动构造PNG字节数组（完全不依赖Canvas） #

如果你完全不想碰任何Canvas相关API，那可以手动构造PNG格式的字节流。因为你的数据是单通道灰度图，我们可以直接生成灰度PNG（比RGBA格式更省空间），下面是一个简化的实现：

// 将单通道灰度Uint8Array转换为PNG Blob的函数
function grayUint8ArrayToPngBlob(frameBytes, width, height) {
  // PNG文件的固定签名
  const pngSignature = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
  
  // 构造IHDR块：存储图像的基本信息（宽高、位深、颜色类型等）
  const ihdrData = new Uint8Array(13);
  const ihdrView = new DataView(ihdrData.buffer);
  ihdrView.setUint32(0, width, false);  // 图像宽度（大端字节序）
  ihdrView.setUint32(4, height, false); // 图像高度（大端字节序）
  ihdrData[8] = 8;  // 每个像素8位深度
  ihdrData[9] = 0;  // 颜色类型：灰度图
  ihdrData[10] = 0; // 压缩方法：默认deflate
  ihdrData[11] = 0; // 过滤方法：无过滤
  ihdrData[12] = 0; // 交错方式：无交错
  const ihdrBlock = createPngBlock('IHDR', ihdrData);
  
  // 构造IDAT块：存储图像像素数据，每行开头加0表示无过滤
  const idatContent = [];
  for (let y = 0; y < height; y++) {
    idatContent.push(0); // 过滤字节（无过滤）
    // 取出当前行的所有灰度像素
    const rowStart = y * width;
    idatContent.push(...frameBytes.slice(rowStart, rowStart + width));
  }
  const idatData = new Uint8Array(idatContent);
  const idatBlock = createPngBlock('IDAT', idatData);
  
  // 构造IEND块：PNG文件结束标记
  const iendBlock = createPngBlock('IEND', new Uint8Array(0));
  
  // 拼接所有部分得到完整的PNG字节数组
  const pngBytes = new Uint8Array([
    ...pngSignature,
    ...ihdrBlock,
    ...idatBlock,
    ...iendBlock
  ]);
  
  return new Blob([pngBytes], { type: 'image/png' });

  // 辅助函数：生成PNG的标准块（包含长度、块类型、数据、CRC校验）
  function createPngBlock(typeStr, data) {
    const type = new Uint8Array([...typeStr].map(c => c.charCodeAt(0)));
    const length = new Uint8Array(4);
    new DataView(length.buffer).setUint32(0, data.length, false);
    
    // 计算CRC32校验值
    function crc32(buf) {
      let crc = 0xFFFFFFFF;
      for (const b of buf) {
        crc ^= b;
        for (let i = 0; i < 8; i++) {
          crc = (crc >>> 1) ^ (0xEDB88320 * (crc & 1));
        }
      }
      return crc ^ 0xFFFFFFFF;
    }
    const crcData = new Uint8Array(4);
    const crcValue = crc32(new Uint8Array([...type, ...data]));
    new DataView(crcData.buffer).setUint32(0, crcValue, false);
    
    return new Uint8Array([...length, ...type, ...data, ...crcData]);
  }
}

// 使用示例
const width = fingerFrame.width;
const height = fingerFrame.height;
const pngBlob = grayUint8ArrayToPngBlob(frameBytes, width, height);
const img = document.getElementById('i');
img.src = URL.createObjectURL(pngBlob);
// 加载完成后释放URL
img.onload = () => URL.revokeObjectURL(img.src);

小提示： #

• 方案二的函数是简化版，没有启用PNG压缩，对于大图像来说体积会偏大。如果需要处理高清大图，建议给IDAT块添加Deflate压缩逻辑。
• 两种方案都记得在图片加载完成后调用URL.revokeObjectURL，避免内存泄漏哦。

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