Manual OpenCV.js build not working in Node

1

I want to build my own copy of opencv.js to be able to include image processing function that are not available in the readily available opencv.js.

I followed the build instructions for the 4.7 version using the Docker and emscripten v2.0.10.
The build is successful and generates a seemingly valid custom_opencv.js file.

However, when I try to use this custom version of openCv in one of the documented exemples it does not work properly.

// From the doc
Module = {
  onRuntimeInitialized() {
    console.log("This is properly called after init");
    console.log(cv.getBuildInformation()); // This does not log anything
  }
}
cv = require('./opencv.js')

When trying to access an openCv method such as cv.matFromImageData(imageSrc.bitmap);, I get a runtime error TypeError: cv.matFromImageData is not a function.

For comparison, the available opencv.js works perfectly fine.

Any opinion or idea on how to debug this would be appreciated.

1 Like
2

I have got the same problem when building opencv.js from source with versions 3.4 and 4.x. on Windows 10 WSL with Emscripten 3.1.44.

I was using this command to build emmake python3 ./opencv/platforms/js/build_js.py build_js --build_test. It have worked, however some of the test were failing.

1. okay@ 1 ms
2. okay@ 1 ms
3. okay@ 1 ms
4. okay@ 1 ms
5. okay@ 1 ms
6. okay@ 1 ms
7. okay@ 1 ms
8. okay@ 1 ms
9. okay@ 1 ms
10. okay@ 1 ms
11. okay@ 1 ms
12. okay@ 1 ms
13. Died on test #13     at http://localhost:8888/test_mat.js:78:7: cv._malloc is not a function@ 2 ms
Source: 	
TypeError: cv._malloc is not a function
    at Object.<anonymous> (http://localhost:8888/test_mat.js:119:23)

When I was following this tutorial. I got an error cv.matFromImageData. I figured out that it was because cv was a promise and after I change to use then it fixed some problems

This is my index.html file

<body>
    <h2>Hello OpenCV.js</h2>
    <p id="status">OpenCV.js is loading...</p>
    <div>
        <div class="inputoutput">
            <img id="imageSrc" alt="No Image" />
            <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
        </div>
        <div class="inputoutput">
            <canvas id="canvasOutput"></canvas>
            <div class="caption">canvasOutput</div>
        </div>
    </div>
    <script type="text/javascript">
        let imgElement = document.getElementById('imageSrc');
        let inputElement = document.getElementById('fileInput');
        inputElement.addEventListener('change', (e) => {
            imgElement.src = URL.createObjectURL(e.target.files[0]);
        }, false);
        var Module = {
            // https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
            onRuntimeInitialized() {
                document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
                console.log('Loaded1', Date.now());
                cv.then(r => {
                    window.cv = r;
                    console.log('Loaded2', Date.now());
                    imgElement.onload = function () {
                        let mat = r.imread(imgElement);
                        r.imshow('canvasOutput', mat);
                        mat.delete();
                    };
                })
            }
        };
    </script>
    <script async src="opencv.js" type="text/javascript"></script>
</body>

Also I had to change cv.matFromImageData(imgData) to window.cv.matFromImageData(imgData) and new = cv.Matto new window.cv.Mat in opencv.js.

After that I have got a different error RangeError: offset is out of bounds.

image
image915×719 124 KB

3

Hey, did you figure this out? I’m having the same issue and not sure how to proceed.

4

Hey, here’s the fix