發送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客戶

回答

相關問題