diff --git a/doc/js_tutorials/js_assets/js_setup_usage.html b/doc/js_tutorials/js_assets/js_setup_usage.html index 4f00dc3bd9..6c3bbba6ca 100644 --- a/doc/js_tutorials/js_assets/js_setup_usage.html +++ b/doc/js_tutorials/js_assets/js_setup_usage.html @@ -36,7 +36,8 @@ inputElement.addEventListener('change', (e) => { imgElement.src = URL.createObjectURL(e.target.files[0]); }, false); -imgElement.onload = function() { +imgElement.onload = async function() { + cv = (cv instanceof Promise) ? await cv : cv; let mat = cv.imread(imgElement); cv.imshow('canvasOutput', mat); mat.delete(); diff --git a/doc/js_tutorials/js_setup/js_setup/js_setup.markdown b/doc/js_tutorials/js_setup/js_setup/js_setup.markdown index 87a32a78cb..198cc74a24 100644 --- a/doc/js_tutorials/js_setup/js_setup/js_setup.markdown +++ b/doc/js_tutorials/js_setup/js_setup/js_setup.markdown @@ -73,6 +73,10 @@ Building OpenCV.js from Source --------------------------------------- -# To build `opencv.js`, execute python script `/platforms/js/build_js.py `. + The build script builds WebAssembly version by default(`--build_wasm` switch is kept by back-compatibility reason). + By default everything is bundled into one JavaScript file by `base64` encoding the WebAssembly code. For production + builds you can add `--disable_single_file` which will reduce total size by writing the WebAssembly code + to a dedicated `.wasm` file which the generated JavaScript file will automatically load. For example, to build in `build_js` directory: @code{.bash} @@ -82,16 +86,6 @@ Building OpenCV.js from Source @note It requires `python` and `cmake` installed in your development environment. --# The build script builds asm.js version by default. To build WebAssembly version, append `--build_wasm` switch. - By default everything is bundled into one JavaScript file by `base64` encoding the WebAssembly code. For production - builds you can add `--disable_single_file` which will reduce total size by writing the WebAssembly code - to a dedicated `.wasm` file which the generated JavaScript file will automatically load. - - For example, to build wasm version in `build_wasm` directory: - @code{.bash} - emcmake python ./opencv/platforms/js/build_js.py build_wasm --build_wasm - @endcode - -# [Optional] To build the OpenCV.js loader, append `--build_loader`. For example: diff --git a/doc/js_tutorials/js_setup/js_usage/js_usage.markdown b/doc/js_tutorials/js_setup/js_usage/js_usage.markdown index 4034977f08..ba124468f1 100644 --- a/doc/js_tutorials/js_setup/js_usage/js_usage.markdown +++ b/doc/js_tutorials/js_setup/js_usage/js_usage.markdown @@ -63,13 +63,16 @@ Example for asynchronous loading ### Use OpenCV.js Once `opencv.js` is ready, you can access OpenCV objects and functions through `cv` object. +The promise-typed `cv` object should be unwrap with `await` operator. +See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await . For example, you can create a cv.Mat from an image by cv.imread. @note Because image loading is asynchronous, you need to put cv.Mat creation inside the `onload` callback. @code{.js} -imgElement.onload = function() { +imgElement.onload = await function() { + cv = (cv instanceof Promise) ? await cv : cv; let mat = cv.imread(imgElement); } @endcode @@ -116,7 +119,8 @@ inputElement.addEventListener('change', (e) => { imgElement.src = URL.createObjectURL(e.target.files[0]); }, false); -imgElement.onload = function() { +imgElement.onload = async function() { + cv = (cv instanceof Promise) ? await cv : cv; let mat = cv.imread(imgElement); cv.imshow('canvasOutput', mat); mat.delete();