当前位置：首页 > JavaScript

js实现二进制流转图片

2026-03-02 03:23:41JavaScript

使用 FileReader 读取二进制流

将二进制流转换为 DataURL 格式，可通过 FileReader 对象实现。这种方法适用于从 AJAX 请求或 WebSocket 获取的二进制数据。

function binaryToImage(binaryData, mimeType) {
  return new Promise((resolve, reject) => {
    const blob = new Blob([binaryData], { type: mimeType });
    const reader = new FileReader();

    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => resolve(img);
    };
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

// 使用示例
fetch('image.bin')
  .then(res => res.arrayBuffer())
  .then(buffer => binaryToImage(buffer, 'image/png'))
  .then(img => document.body.appendChild(img));

使用 URL.createObjectURL 直接显示

对于不需要 base64 编码的场景，可以直接通过 Blob 创建对象 URL，这种方式内存效率更高。

function displayBinaryImage(binaryData, mimeType) {
  const blob = new Blob([binaryData], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const img = new Image();

  img.src = url;
  img.onload = () => URL.revokeObjectURL(url); // 释放内存
  return img;
}

// 使用示例
const binaryData = new Uint8Array([...]); // 二进制数据
const imgElement = displayBinaryImage(binaryData, 'image/jpeg');
document.body.appendChild(imgElement);

处理 ArrayBuffer 或 TypedArray

当二进制数据以 ArrayBuffer 或 TypedArray 形式存在时，可直接转换为 Blob：

// 假设收到的是 ArrayBuffer
const arrayBuffer = await response.arrayBuffer();

// 或者 Uint8Array
const uint8Array = new Uint8Array(arrayBuffer);

// 转换为Blob时无需额外处理
const blob = new Blob([uint8Array], { type: 'image/webp' });

Canvas 渲染二进制图像

若需进一步处理图像，可将生成的图像绘制到 Canvas：

js实现二进制流转图片

binaryToImage(binaryData, 'image/png').then(img => {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  // 后续可操作canvas
  document.body.appendChild(canvas);
});