https://github.com/techstark/opencv-js
OpenCV JavaScript version for node.js or browser
https://github.com/techstark/opencv-js
js npm-package opencv
Last synced: 5 months ago
JSON representation
OpenCV JavaScript version for node.js or browser
- Host: GitHub
- URL: https://github.com/techstark/opencv-js
- Owner: TechStark
- License: apache-2.0
- Created: 2021-02-12T14:31:30.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-04-04T13:58:52.000Z (about 1 year ago)
- Last Synced: 2025-04-10T03:48:00.499Z (about 1 year ago)
- Topics: js, npm-package, opencv
- Language: TypeScript
- Homepage: https://npmjs.com/@techstark/opencv-js
- Size: 29.3 MB
- Stars: 538
- Watchers: 4
- Forks: 47
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# opencv-js
OpenCV JavaScript version (NPM package) for node.js or browser. Get started guide [OpenCV.js Tutorials](https://docs.opencv.org/4.12.0/#:~:text=OpenCV%2DPython%20Tutorials-,OpenCV.js%20Tutorials,-Tutorials%20for%20contrib).
The file `opencv.js` was downloaded from https://docs.opencv.org/4.12.0/opencv.js
TypeScript is supported (thanks to `mirada`).
# Basic Usage
```js
import cvModule from "@techstark/opencv-js";
async function getOpenCv() {
let cv;
if (cvModule instanceof Promise) {
cv = await cvModule;
} else {
if (cvModule.Mat) {
cv = cvModule;
} else {
await new Promise((resolve) => {
cvModule.onRuntimeInitialized = () => resolve();
});
cv = cvModule;
}
}
return { cv };
}
async function main() {
const { cv } = await getOpenCv();
console.log("OpenCV.js is ready!");
// You can now use OpenCV functions here
console.log(cv.getBuildInformation());
}
main();
```
# Code Examples
- See code examples (React, Angular, Node.js) in [opencv-js-examples](https://github.com/TechStark/opencv-js-examples)
# Live Demo
## Using in react.js project
- See [live demo and code here](https://codesandbox.io/s/techstarkopencv-js-demo-page-f7gvk?file=/src/TestPage.jsx)
- Get the test image from here [Lenna.png](test/Lenna.png)
## Using in Angular project
- See [code here](https://codesandbox.io/s/techstark-opencv-js-angular-demo-hkmc1n?file=/src/app/app.component.ts)
## Real-time face detection
- See [live demo and code here](https://codesandbox.io/s/opencv-js-face-detection-i1i3u)
# How to Use
- `npm install @techstark/opencv-js`
- or `yarn add @techstark/opencv-js`
- `import cv from "@techstark/opencv-js"`
- for TypeScript, set `"esModuleInterop": true` in `tsconfig.json`
- or `import * as cv from "@techstark/opencv-js"`
# Webpack Configuration (for browser usage)
If you use this package for browsers, you need to set some polyfills. In the file "webpack.config.js", set
```js
module.exports = {
resolve: {
modules: [...],
fallback: {
fs: false,
path: false,
crypto: false
}
}
};
```
# What methods and properties are available
The TypeScript type declarations may not be up to date with the latest OpenCV.js. Refer to [cvKeys.json](doc/cvKeys.json) to check the available methods and properties at runtime.
# Star History
[](https://star-history.com/#techstark/opencv-js&Date)