Merge pull request #27148 from Kumataro:fix27129

doc: js: unwrap promise-typed cv object
This commit is contained in:
Alexander Smorkalov 2025-03-26 08:50:53 +03:00 committed by GitHub
commit 9a1f71c14b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 12 additions and 13 deletions

View File

@ -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();

View File

@ -73,6 +73,10 @@ Building OpenCV.js from Source
---------------------------------------
-# To build `opencv.js`, execute python script `<opencv_src_dir>/platforms/js/build_js.py <build_dir>`.
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:

View File

@ -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();