Javascript trackbar example issue

1

I’m trying to get the opencv.js trackbar example working off of a page/server from my own computer. I saved the web page, the sample image files (the orange and the apple), and isolated the relevant part (js_trackbar.html) and all of the needed support files in a folder. The initial loading/code running works fine (I see the apple and orange and the initial blended image). But I’m getting an error when I try to move the trackbar:

RuntimeError: function signature mismatch
at :wasm-function[137]:0xf97a
at dynCall_iii (:wasm-function[11916]:0x4f1ded)
at Module.dynCall_iii (http://localhost:8080/opencv.js:30:8020191)
at dynCall_iii_26 (eval at makeDynCaller (http://localhost:8080/opencv.js:30:7971267), :4:12)
at Mat.get [as data] (http://localhost:8080/opencv.js:30:7983440)
at Object.Module.matFromImageData (http://localhost:8080/opencv.js:30:8060151)
at Object.Module.imread (http://localhost:8080/opencv.js:30:8054512)
at eval (eval at Utils.executeCode (http://localhost:8080/utils.js.download:74:13), :4:15)
at Utils.executeCode (http://localhost:8080/utils.js.download:74:13)
at HTMLInputElement. (http://localhost:8080/js_trackbar.html:73:11)

Here is the relevant js code in the html file:

<script id="codeSnippet" type="text/code-snippet">
let trackbar = document.getElementById('trackbar');
let alpha = trackbar.value/trackbar.max;
let beta = ( 1.0 - alpha );
let src1 = cv.imread('canvasInput1');
let src2 = cv.imread('canvasInput2');
let dst = new cv.Mat();
cv.addWeighted( src1, alpha, src2, beta, 0.0, dst, -1);
cv.imshow('canvasOutput', dst);
dst.delete();
src1.delete();
src2.delete();
</script>
<script type="text/javascript">
let utils = new Utils('errorMessage');

utils.loadCode('codeSnippet', 'codeEditor');
utils.loadImageToCanvas('orange.png', 'canvasInput1');
utils.loadImageToCanvas('apple.png', 'canvasInput2');

let trackbar = document.getElementById('trackbar');
trackbar.addEventListener('input', () => {
    utils.executeCode('codeEditor'); //this is line # 73
});

let weightValue = document.getElementById('weightValue');
weightValue.innerText = trackbar.value;
trackbar.addEventListener('input', () => {
    weightValue.innerText = trackbar.value;
});

utils.loadOpenCv(() => {
    trackbar.removeAttribute('disabled');
    utils.executeCode('codeEditor');
});
</script>

From what I’ve deduced, calling cv.imread(‘canvasInput1’); works fine in the initial run, but is failing (function signature mismatch) when called from within trackbar.addEventListener. It does not matter whether I call it from utils.executeCode or if I have cv.imread(… directly inside the event listener.

I’ve tried running on both Chrome and Firefox, using python -m http.server and npx http_server for the host. The example on the site works fine, however.

Any ideas?