如何在JS中解码WebSocket传输的OpenCV编码JPEG图片并显示？

问题背景 #

C++端通过OpenCV生成JPEG二进制数据并转为字符串，经WebSocket传输到JS端后，两种常见解码方法均无法正常显示图片：

• C++端生成代码：

cv::imencode(".jpeg", rgb_img, jpeg_data);
std::string jpeg_string(jpeg_data.begin(), jpeg_data.end());

• JS端尝试的两种无效方法：
  1. 转换为Blob生成Object URL：生成的src格式为blob:http://0.0.0.0:7000/<随机字符>，图片无法加载。
  2. 直接拼接base64 Data URI：生成的src格式为data:image/jpeg;base64,<大写字母数字>，同样无法显示。

问题原因 #

1. 文本模式传输破坏二进制数据：WebSocket默认以文本模式传输，会将JPEG二进制数据按UTF-8编码转换为字符串，而JPEG包含大量非ASCII字符，转换后原始字节信息丢失，JS端用charCodeAt()还原时会得到错误的字节值。
2. 错误混淆原始二进制与base64：C++端生成的jpeg_string是原始二进制的直接转换，并非base64编码后的字符串，直接拼接base64前缀自然无法解码。

解决方案 #

方案1：使用WebSocket二进制模式传输（推荐） #

直接传输原始二进制数据，避免编码转换损失，是最可靠的方式。

C++端：发送二进制帧

确保WebSocket发送时指定二进制帧类型（而非文本帧）。例如使用libwebsockets时，调用lws_write需传入LWS_WRITE_BINARY参数；其他WebSocket库对应设置二进制发送模式即可。

JS端：接收并处理ArrayBuffer

初始化WebSocket时设置接收类型为arraybuffer，直接处理原始二进制数据：

// 初始化WebSocket连接
const ws = new WebSocket('ws://你的服务地址');
// 指定接收二进制数据的类型为ArrayBuffer
ws.binaryType = 'arraybuffer';

ws.onmessage = function(event) {
  if (event.data instanceof ArrayBuffer) {
    // 用ArrayBuffer创建JPEG格式的Blob
    const jpegBlob = new Blob([event.data], { type: 'image/jpeg' });
    // 生成Object URL并赋值给目标img标签
    const imageUrl = URL.createObjectURL(jpegBlob);
    const imgElement = document.getElementById('你的img标签ID');
    imgElement.src = imageUrl;
    
    // 图片加载完成后释放ObjectURL，避免内存泄漏
    imgElement.onload = () => {
      URL.revokeObjectURL(imageUrl);
    };
  }
};

方案2：base64编码后文本传输 #

若因环境限制必须用文本模式传输，可在C++端先对二进制JPEG数据做base64编码，再发送字符串，JS端解码后生成Data URI。

C++端：添加base64编码

引入base64编码库（如libb64），对jpeg_data进行编码：

#include <b64/encode.h> // libb64的头文件

cv::imencode(".jpeg", rgb_img, jpeg_data);
// 对二进制JPEG数据执行base64编码
base64::encoder enc;
std::string base64_string;
enc.encode(reinterpret_cast<const char*>(jpeg_data.data()), jpeg_data.size(), base64_string);
// 发送编码后的base64_string

JS端：生成Data URI

// 假设receivedString是WebSocket接收到的base64字符串
const imageDataUri = `data:image/jpeg;base64,${receivedString}`;
document.getElementById('你的img标签ID').src = imageDataUri;

验证要点 #

• 确认WebSocket传输模式：二进制模式下，JS端event.data应为ArrayBuffer类型；文本模式下需确保C++端已完成base64编码。
• 检查Blob的MIME类型：必须设置为image/jpeg，否则浏览器无法正确识别图片格式。

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