Hello,
I am trying to use HTML5 for and websockets to send a canvas image to a server in C++ using websockets, then manipulate the image with OpenCV and send it back to the webpage. I am able to successfully send and receive data from C++ using websockets to the webpage. However, when i use any of the following all i get is garbage in OpenCV:
var img = canvas.getImageData(0, 0, 320, 240);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i];
}
socket.send(binary.buffer);
Also have tried:
var data = canvas.get()[0].toDataURL('image/jpeg', 1.0);
newblob = dataURItoBlob(data);
socket.send(newblob);
using the function:
function dataURItoBlob(dataURI) {
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var bb;
try {
bb = new BlobBuilder();
} catch(e) {
try {
bb = new WebKitBlobBuilder();
} catch(e) {
bb = new MozBlobBuilder();
}
}
bb.append(ab);
return bb.getBlob(mimeString);
};
Server side I am using:
CvMat mat1 = cvMat(320, 240,CV_8UC3, &buffer);
IplImage *frame = cvDecodeImage(&mat1);
cv::imshow("Input Image", frame);
Also tried the hard way:
CvSize size = cvSize(320, 240);
int depth = IPL_DEPTH_8U;
int channels = 3;
IplImage *frame = cvCreateImageHeader(size, depth,channels);
frame->imageData = (char*)buffer;
cv::imshow("Input Image", frame);
And still, all i get in OpenCV is garbage recieved from the HTML5 socket send. It is not a valid jpeg image I am receiving. The image I get is only capable of being displayed on another Canvas itself and not useable in OpenCV.
What I am doing wrong? Any suggestions? Anyone familiar with this problem? And help?