ROS2通过WebSocket传输USB摄像头图像问题求助

你收到的字母数字内容是base64编码后的二进制像素数据——rosbridge为了高效传输二进制数组，会自动将sensor_msgs/msg/Image中的data字段（原本是uint8像素数组）编码为base64字符串，这是默认传输机制，不是异常情况。

以下是完整的解码并渲染灰度图像的实现代码：

// 先在HTML中添加用于显示图像的canvas元素
// <canvas id="cameraCanvas"></canvas>

const canvas = document.getElementById('cameraCanvas');
const ctx = canvas.getContext('2d');

imageTopic.subscribe(function(message) {
  // 1. 把base64字符串解码为Uint8Array格式的像素数据
  const binaryString = atob(message.data);
  const pixelArray = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    pixelArray[i] = binaryString.charCodeAt(i);
  }

  // 2. 同步Canvas尺寸与图像的宽高
  canvas.width = message.width;
  canvas.height = message.height;

  // 3. 将mono8单通道灰度数据转换为RGBA格式的ImageData
  const imageData = ctx.createImageData(message.width, message.height);
  const rgbaData = imageData.data;

  // 遍历灰度像素，复制到RGB三通道，Alpha通道设为255（不透明）
  for (let i = 0; i < pixelArray.length; i++) {
    rgbaData[i * 4] = pixelArray[i];     // 红色通道
    rgbaData[i * 4 + 1] = pixelArray[i]; // 绿色通道
    rgbaData[i * 4 + 2] = pixelArray[i]; // 蓝色通道
    rgbaData[i * 4 + 3] = 255;           // Alpha通道
  }

  // 4. 将图像数据渲染到Canvas上
  ctx.putImageData(imageData, 0, 0);
});

关键说明： #

• 你的图像参数width=848、height=800、step=848完全匹配，说明没有行对齐的额外填充字节，直接遍历像素数组即可。
• mono8是单通道灰度编码，而浏览器的ImageData要求RGBA四通道格式，因此需要将每个灰度值复制到R、G、B三个通道。
• 如果需要优化性能，可以考虑使用requestAnimationFrame控制渲染频率，避免因帧率过高导致页面卡顿。

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