Electron/Node.js中无法显示bgra8编码的Uint8Array（Buffer格式）

核心结论：这是BGRA8编码格式的问题，和Buffer/Uint8Array的转换无关

问题原因 #

你犯了一个关键错误：直接把BGRA8格式的原始像素Buffer转成base64，然后套上data:image/jpg;base64,前缀。BGRA8是未压缩的原始像素数据（每个像素用4字节存储蓝、绿、红、透明度通道），而image/jpg要求的是经过JPEG压缩编码后的二进制数据，两者完全不是一回事，浏览器自然无法识别显示。

至于Buffer和Uint8Array的转换，Buffer.from(cam_message.data)是完全正确的，这部分没有问题。

解决方案 #

你需要先把BGRA8的原始像素数据转换成JPEG编码的二进制数据，再转base64发送给渲染进程；或者直接在渲染进程中渲染原始像素数据，避免编码开销。

方案1：主进程转JPEG后发送（适合需要保存或传输JPEG的场景）

用Electron自带的nativeImage处理，轻量无需额外依赖：

// 主进程代码
const { nativeImage } = require('electron');

// 必须提前知道相机帧的宽高，比如1920*1080
const frameWidth = 1920;
const frameHeight = 1080;

// 接收BGRA8格式的Buffer
const bgraBuffer = Buffer.from(cam_message.data);

// 创建nativeImage实例，指定格式为BGRA
const frameImage = nativeImage.createFromBuffer(bgraBuffer, {
  width: frameWidth,
  height: frameHeight,
  format: 'BGRA'
});

// 转成JPEG格式的Buffer，第二个参数是质量（0-100，越高质量越大）
const jpegBuffer = frameImage.toJPEG(90);

// 转base64发送给渲染进程
const base64Jpeg = jpegBuffer.toString('base64');
mainWindow.webContents.send('camera-frame', base64Jpeg);

渲染进程接收后直接使用：

// 渲染进程代码
const { ipcRenderer } = require('electron');

ipcRenderer.on('camera-frame', (_, base64) => {
  document.getElementById('camera-img').src = `data:image/jpg;base64,${base64}`;
});

方案2：渲染进程直接渲染原始像素（适合实时相机流，性能更高）

跳过JPEG编码，直接用createImageBitmap解析BGRA数据，通过Canvas渲染：

// 主进程直接发送BGRA的Buffer（不用转base64，节省带宽和CPU）
mainWindow.webContents.send('camera-frame', bgraBuffer);

// 渲染进程代码
const { ipcRenderer } = require('electron');
const canvas = document.getElementById('camera-canvas');
const ctx = canvas.getContext('2d');
const frameWidth = 1920;
const frameHeight = 1080;
canvas.width = frameWidth;
canvas.height = frameHeight;

ipcRenderer.on('camera-frame', async (_, buffer) => {
  // 将Buffer转成Uint8Array，创建ImageBitmap
  const imageBitmap = await createImageBitmap(new Uint8Array(buffer), 0, buffer.length, {
    width: frameWidth,
    height: frameHeight,
    format: 'BGRA',
    premultiplyAlpha: 'none'
  });
  // 绘制到Canvas
  ctx.drawImage(imageBitmap, 0, 0);
  // 释放内存
  imageBitmap.close();
});

关键注意点 #

• 必须明确相机帧的准确宽高，否则无法正确解析BGRA像素数据。
• 如果是高分辨率实时流，方案2的性能远优于方案1，因为JPEG编码会带来额外CPU开销。

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