发送OpenCV的垫图像的WebSocket向HTML客户

我试图使用Qt 5.7用C编写的应用程序++，基本上它应该是一个WebSocket的服务器，使用qwebsocket为此，能够发送图像阐述与OpenCV的一个HTML客户端。我正在试图做的是编码图像用base64，传输和客户端把编码字符串中的图像标签的src。只是为了测试，我可以正确地发送/接收短信，所以WebSocket的建筑工作，但我有一些问题的图像。这是我的代码片段：发送OpenCV的垫图像的WebSocket向HTML客户

服务器

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

我想大多数的问题都在服务器，因为基地64序列我从图像中得到的是从一个我可以从网上转换图像/ BASE64得到不同。在客户端我收到此错误在控制台，并没有什么表明：

数据：图像/ PNG; BASE64，[对象ArrayBuffer]：1 GET 数据：图像/ PNG; BASE64，[对象ArrayBuffer] net :: ERR_INVALID_URL

任何提示？

SOLUTION

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

服务器

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编码使用该代码来完成：

Encode/Decode base64

来源

2017-06-06 rok

为什么'websocket.binaryType =“arraybuffer”;'，如果你只是想要一个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，你将不得不使用像imencode到PNG数据写入到内存缓冲区和Base64编码来代替。

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

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

可能不会，事实上，包住整个图像缓冲区在QByteArray。有多种方法可以检查图像的步幅/步幅，但您最好阅读cv::Mat文档，因为这里不值得我重复这些文档。如果你正在做原始的字节级图像处理，这一点很重要，就像你在这里一样。如果您使用imencode，则无需担心这一点。

来源

2017-06-06 17:35:29 Rook

发送OpenCV的垫图像的WebSocket向HTML客户

回答

相关问题