通过Qt websocket将opencv Mat图像发送到HTML客户端 我试图用Qt 5.7在C++中编写一个应用程序，基本上应该是WebSoSver服务器，使用QWebSutoSt，能够将OpenCV所阐述的图像发送给HTML客户端。我要做的是在base64中对图像进行编码，然后在客户端将编码后的字符串放入图像标记的src中。 只是为了测试，我可以正确地发送/接收文本消息，因此websocket架构可以正常工作，但是我在图像方面遇到了一些问题。这是我的代码片段：

服务器

    cv::Mat imgIn;
    imgIn = cv::imread("/home/me/color.png",CV_LOAD_IMAGE_COLOR);
    QByteArray Img((char*)(imgIn.data),imgIn.total()*imgIn.elemSize());
    QByteArray Img64 = Img.toBase64();
    pClient->sendBinaryMessage(Img64);

    imgIn = cv::imread("/home/me/color.png", CV_LOAD_IMAGE_UNCHANGED);
    std::vector<uchar> buffer;
    cv::imencode(".png",imgIn,buffer);
    std::string s = base64_encode(buffer.data(),buffer.size());
    pClient->sendTextMessage(QString::fromStdString(s));

客户端

<img id="ItemPreview" src="" style="border:5px solid black" />

我认为大多数问题都在服务器上，因为我从映像中获取的base64序列与我从联机转换器image/base64中获取的序列不同。 在客户端上，我在控制台中收到此错误，但未显示任何内容：

数据：图像/png；base64[object ArrayBuffer]：1获取 数据：图像/png；base64，[object ArrayBuffer]net:：ERR\u无效\u URL

有什么提示吗

解决方案

由于这些建议，我可以提供工作代码：

服务器

    cv::Mat imgIn;
    imgIn = cv::imread("/home/me/color.png",CV_LOAD_IMAGE_COLOR);
    QByteArray Img((char*)(imgIn.data),imgIn.total()*imgIn.elemSize());
    QByteArray Img64 = Img.toBase64();
    pClient->sendBinaryMessage(Img64);

    imgIn = cv::imread("/home/me/color.png", CV_LOAD_IMAGE_UNCHANGED);
    std::vector<uchar> buffer;
    cv::imencode(".png",imgIn,buffer);
    std::string s = base64_encode(buffer.data(),buffer.size());
    pClient->sendTextMessage(QString::fromStdString(s));

服务器中的base64编码使用以下代码完成：

---

服务器中的这一行：

imgIn = cv::imread("/home/me/color.png",CV_LOAD_IMAGE_COLOR);

解码PNG格式的图像，并将其作为像素数据加载放在内存中（可能还有一些行填充，您不考虑这些，请参见下文）。这就是你的base64编码

客户端中的此行：

document.getElementById("ItemPreview").src = "data:image/png;base64," + evt.data;

需要一个PNG图像，但这不是你要发送的；您刚刚推出了大量原始像素数据，没有任何尺寸、步幅、格式信息或其他信息

如果您的客户机想要一个PNG，那么您必须使用类似于将PNG数据写入内存缓冲区的东西，然后使用base64编码

另一个需要注意的重要事项是，解码图像可能有行填充。。。每行末尾的几个字节用于内存对齐。因此，每个图像行的实际长度可能超过图像的宽度乘以每个像素的大小（以字节为单位）。这意味着此操作：

QByteArray Img((char*)(imgIn.data),imgIn.total()*imgIn.elemSize());

---

实际上，可能不会将整个图像缓冲区包装在

QByteArray

中。检查图像的步幅/步幅有多种方法，但您最好阅读文档，因为不值得我在这里全部重复。这只在您正在执行原始字节级图像处理时才重要，就像您在这里一样。如果您使用

imencode

，您不必担心这一点。

为什么

websocket.binaryType=“arraybuffer”，如果您只需要base64字符串？