通过Qt websocket将opencv Mat图像发送到HTML客户端

Question

我正试图用Qt5.7用c编写一个应用程序，基本上它应该是一个websocket服务器，使用qwebsocket，能够将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);

客户

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

....

websocket.binaryType = "arraybuffer";

websocket.onmessage = function (evt) {
console.log( "Message received :", evt.data );
document.getElementById("ItemPreview").src = "data:image/png;base64," + evt.data;
};

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

data： Image/png； Bas64，[对象ArrayBuffer]： 1 GET data： Image/png； Bas64，[对象ArrayBuffer]::ERR_INVALID_URL

有什么提示吗？

解决方案

感谢建议，我可以提供工作代码：

服务器

    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));

客户

删除了这一行：

    websocket.binaryType = "arraybuffer";

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

编码/解码base64

Answer 1

服务器中的这一行：

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，则必须使用类似于imencode的方法将PNG数据写入内存缓冲区，然后改为base64编码。

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

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

实际上，可能不会将整个图像缓冲区包装在QByteArray中。检查图像的步幅/步长有多种方法，但您最好阅读cv:：Mat文档，因为我不值得在这里重复所有这些文档。这只在您正在执行原始字节级图像处理时才重要，就像您在这里一样。如果使用imencode，则不必担心这一点。