cv::imdecode an image from JS to C++ (opencv, emscripten)

Question

What I\'m trying to do:

• the user loads an image in html
• opencv receives that image in C++ and do some work on it.

What I\'ve done is more o

Answer 1

As said in the provided link, the solution is to use a canvas and send to C++ the list of pixels (4x480x640 numbers as an example).

On the JS side you have

function sendCanvas(canvas, baseImage) {
    const context = canvas.getContext('2d');
    context.drawImage(baseImage, 0, 0, baseImage.width, baseImage.height);
    const { width } = canvas;
    const { height } = canvas;
    const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
    const uint8ArrData = new Uint8Array(imgData.data);

     // pass the width and height too !!
    passToWasm(uint8ArrData, width, height);
}

 const baseImage = new Image();
    baseImage.src = 'test.jpg';
    baseImage.onload = () => sendCanvas(canvas, baseImage);

You have to adapt the function passToWasm to take two more arguments (width and height) and pass them to the C++ call.

Then on the C++ side, you create the image as a cv::Mat directly with these informations:

void image_input(int offset, size_t size, int width, int height) {
  // People in the doc do not need this cast trick. Why ???
  uint8_t *pos;
  pos = reinterpret_cast<uint8_t *>(offset);
  auto cv_image = cv::Mat(width, height, CV_8UC4, pos);
}

The matrix cv_image is ready for manipulations.