Python后端经WebSocket向React前端传OpenCV帧解码报错问题

报错核心来自两处逻辑错误：

• Python端编码错误：直接对b64encode()返回的bytes类型调用str()，生成的字符串会自带bytes字面量标记，也就是你看到的开头b'和结尾的'，哪怕手动去掉开头的b前缀，结尾残留的引号、bytes转字符串时自动添加的转义符都会破坏base64内容完整性，这是你之前加Data URL前缀仍然失败的核心原因
• 前端解码冗余错误：多余调用decodeURIComponent、错误使用atob解码，纯base64图片字符串不需要做URI解码，也不需要手动用atob转成二进制，浏览器可以直接识别拼接了正确前缀的base64 Data URL

后端（Python）代码调整 #

不要用str()转换base64结果，调用bytes对象的.decode('utf-8')方法生成纯base64字符串，避免多余字符：

import cv2
import base64
import json
from urllib.request import urlopen
import numpy as np

stream_url = urlopen(url)
stream_feed = stream_url.read()
image = np.asarray(bytearray(stream_feed), dtype="uint8")
frame = cv2.imdecode(image, cv2.IMREAD_COLOR)
# 先将OpenCV的Mat帧编码为jpeg格式字节流，再做base64编码，最后转成utf-8字符串
_, jpeg_buffer = cv2.imencode('.jpg', frame)
str_frame = base64.b64encode(jpeg_buffer).decode('utf-8')
payload = json.dumps({
    'image': str_frame
})
await remoteSocket.send(payload)

前端（React）代码调整 #

移除多余的解码步骤，直接拼接Data URL前缀赋值给图片src即可：

// 先解析WebSocket收到的JSON消息
const messageData = JSON.parse(websocketMessage)
const orgImg = messageData.image

const img = new Image()
// 拼接标准jpeg图片的Data URL前缀
img.src = `data:image/jpeg;base64,${orgImg}`
img.alt = 'frame'
// 后续可将img插入DOM，或绘制到canvas上渲染

注意：如果是实时视频流场景，不要一次性读取整个URL的返回内容，需要按流协议逐帧拆分读取，否则只会拿到第一帧画面；如果传输的是PNG格式帧，将Data URL前缀中的image/jpeg替换为image/png即可。

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