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.Mat
to new window.cv.Mat
in opencv.js
.
After that I have got a different error RangeError: offset is out of bounds
.