Revision history [back]

How to pass image data from javascript to opencv c++ webassembly

I'm trying to pass image bufferArray to c++ function but OpenCV throw an unknown exception(test_wasm.js:2028 Uncaught).

I am beginner.

I'm trying to do the same with the help of this question.

Javascript code:

var openFile = function (e) {
    const fileReader = new FileReader();
    fileReader.onload = (event) => {
        const uint8Arr = new Uint8Array(event.target.result);
        passToWasm(uint8Arr);
    };
    fileReader.readAsArrayBuffer(e.target.files[0]);
};

function passToWasm(uint8ArrData) {
    // copying the uint8ArrData to the heap
    const numBytes = uint8ArrData.length * uint8ArrData.BYTES_PER_ELEMENT;
    const dataPtr = Module._malloc(numBytes);
    const dataOnHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, numBytes);
    dataOnHeap.set(uint8ArrData);
    // calling the Wasm function
    console.log(dataOnHeap.byteOffset);
    const res = Module._image_input(dataOnHeap.byteOffset, uint8ArrData.length);

    Module._free(dataPtr);
}

Html code

<input type="file" id="img" accept="image/*" onchange="openFile(event)"> C++ code

int image_input(uint8_t *buffer, size_t size){ cv::Mat raw_data = cv::Mat(1, size, CV_8UC1, buffer);

    cv::cvtColor(raw_data, raw_data, cv::COLOR_RGB2GRAY);
    return 1;

}

I also tried different colorspace. like: cv::COLOR_RGBA2GRAY, cv::COLOR_BGR2GRAY but all are not working.

Please help.

How to pass image data from javascript to opencv c++ webassembly

I'm trying to pass image bufferArray to c++ function but OpenCV throw an unknown exception(test_wasm.js:2028 Uncaught).

I am beginner.

I'm trying to do the same with the help of this question.

Javascript code:

 var openFile = function (e) {
     const fileReader = new FileReader();
     fileReader.onload = (event) => {
         const uint8Arr = new Uint8Array(event.target.result);
         passToWasm(uint8Arr);
     };
     fileReader.readAsArrayBuffer(e.target.files[0]);
 };

 function passToWasm(uint8ArrData) {
     // copying the uint8ArrData to the heap
     const numBytes = uint8ArrData.length * uint8ArrData.BYTES_PER_ELEMENT;
     const dataPtr = Module._malloc(numBytes);
     const dataOnHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, numBytes);
     dataOnHeap.set(uint8ArrData);
     // calling the Wasm function
     console.log(dataOnHeap.byteOffset);
     const res = Module._image_input(dataOnHeap.byteOffset, uint8ArrData.length);

     Module._free(dataPtr);
 }

Html ~~code~~

code <input ~~type="file" id="img" accept="image/*" onchange="openFile(event)">~~ type='file' id='img' accept='image/*' onchange='openFile(event)'> C++ ~~code~~

code int image_input(uint8_t *buffer, size_t size){ cv::Mat raw_data = cv::Mat(1, size, CV_8UC1, ~~buffer);~~

buffer);

        cv::cvtColor(raw_data, raw_data, cv::COLOR_RGB2GRAY);
     return 1;
  }

}

I also tried different colorspace. like: cv::COLOR_RGBA2GRAY, cv::COLOR_BGR2GRAY cv::COLOR_BGR2GRAY but all are not working.

Please help.

How to pass image data from javascript to opencv c++ webassembly

I'm trying to pass image bufferArray to c++ function but OpenCV throw an unknown exception(test_wasm.js:2028 Uncaught).

I am beginner.

I'm trying to do the same with the help of this question.

Javascript code:

 var openFile = function (e) {
     const fileReader = new FileReader();
     fileReader.onload = (event) => {
         const uint8Arr = new Uint8Array(event.target.result);
         passToWasm(uint8Arr);
     };
     fileReader.readAsArrayBuffer(e.target.files[0]);
 };

 function passToWasm(uint8ArrData) {
     // copying the uint8ArrData to the heap
     const numBytes = uint8ArrData.length * uint8ArrData.BYTES_PER_ELEMENT;
     const dataPtr = Module._malloc(numBytes);
     const dataOnHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, numBytes);
     dataOnHeap.set(uint8ArrData);
     // calling the Wasm function
     console.log(dataOnHeap.byteOffset);
     const res = Module._image_input(dataOnHeap.byteOffset, uint8ArrData.length);

     Module._free(dataPtr);
 }

Html ~~code~~ code

 <input type='file' id='img' accept='image/*' onchange='openFile(event)'>

C++ ~~code~~ code

int image_input(uint8_t *buffer, size_t size){ cv::Mat raw_data = cv::Mat(1, size, CV_8UC1, ~~buffer);~~ buffer);

         cv::cvtColor(raw_data, raw_data, cv::COLOR_RGB2GRAY);
         return 1;
  }

I also tried different colorspace. like: cv::COLOR_RGBA2GRAY, cv::COLOR_BGR2GRAY but all are not working.

Please help.

How to pass image data from javascript to opencv c++ webassembly

I'm trying to pass image bufferArray to c++ function but OpenCV throw an unknown exception(test_wasm.js:2028 Uncaught).

I am beginner.

I'm trying to do the same with the help of this question.

Javascript code:

var openFile = function (e) {
    const fileReader = new FileReader();
    fileReader.onload = (event) => {
        const uint8Arr = new Uint8Array(event.target.result);
        passToWasm(uint8Arr);
    };
    fileReader.readAsArrayBuffer(e.target.files[0]);
};

function passToWasm(uint8ArrData) {
    // copying the uint8ArrData to the heap
    const numBytes = uint8ArrData.length * uint8ArrData.BYTES_PER_ELEMENT;
    const dataPtr = Module._malloc(numBytes);
    const dataOnHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, numBytes);
    dataOnHeap.set(uint8ArrData);
    // calling the Wasm function
    console.log(dataOnHeap.byteOffset);
    const res = Module._image_input(dataOnHeap.byteOffset, uint8ArrData.length);

    Module._free(dataPtr);
}

Html code

  <input type='file' id='img' accept='image/*' onchange='openFile(event)'>

C++ code

int image_input(uint8_t *buffer, size_t size){ cv::Mat raw_data = cv::Mat(1, size, CV_8UC1, buffer);

            cv::cvtColor(raw_data, raw_data, cv::COLOR_RGB2GRAY);
            return 1;
 }

I also tried different colorspace. like: cv::COLOR_RGBA2GRAY, cv::COLOR_BGR2GRAY but all are not working.

Please help.

How to pass image data from javascript to opencv c++ webassembly

I'm trying to pass image bufferArray to c++ function but OpenCV throw an unknown exception(test_wasm.js:2028 Uncaught).

I am beginner.

I'm trying to do the same with the help of this question.

Javascript code:

var openFile = function (e) {
    const fileReader = new FileReader();
    fileReader.onload = (event) => {
        const uint8Arr = new Uint8Array(event.target.result);
        passToWasm(uint8Arr);
    };
    fileReader.readAsArrayBuffer(e.target.files[0]);
};

function passToWasm(uint8ArrData) {
    // copying the uint8ArrData to the heap
    const numBytes = uint8ArrData.length * uint8ArrData.BYTES_PER_ELEMENT;
    const dataPtr = Module._malloc(numBytes);
    const dataOnHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, numBytes);
    dataOnHeap.set(uint8ArrData);
    // calling the Wasm function
    console.log(dataOnHeap.byteOffset);
    const res = Module._image_input(dataOnHeap.byteOffset, uint8ArrData.length);

    Module._free(dataPtr);
}

Html code

  <input type='file' id='img' accept='image/*' onchange='openFile(event)'>

C++ code

int image_input(uint8_t *buffer, size_t size){ cv::Mat raw_data = cv::Mat(1, size, CV_8UC1, buffer); buffer); cv::cvtColor(raw_data, raw_data, cv::COLOR_RGB2GRAY); return 1; } I also tried different colorspace. like: cv::COLOR_RGBA2GRAY, cv::COLOR_BGR2GRAY but all are not working. Please help.