1.0.43 • Published 2 years ago
@dannadori/opencv-worker-js v1.0.43
This is webworker module for OpenCV.
opencv
Install
$ npm install \@dannadori/opencv-worker-js
API
generateOpenCVDefaultConfig: () => OpenCVConfig;
generateDefaultOpenCVParams: () => OpenCVOperationParams;
OpenCVWorkerManager
init(config: OpenCVConfig | null): Promise<unknown>;
predict(targetCanvas: HTMLCanvasElement, params?: OpenCVOperationParams): Promise<HTMLCanvasElement>;
Configuration and Parameter
export interface OpenCVConfig {
browserType : BrowserType;
processOnLocal : boolean;
workerPath : string
}
export interface OpenCVOperationParams {
type: OpenCVFunctionType;
cannyParams: CannyParams | null;
processWidth: number;
processHeight: number;
}
export declare enum OpenCVFunctionType {
Canny = 0,
xxx = 1
}
export interface CannyParams {
threshold1: number;
threshold2: number;
apertureSize: number;
L2gradient: boolean;
}
Step by step
Create environment and install package
$ create-react-app demo/ --typescript
$ cd demo/
$ npm install
$ npm install @dannadori/opencv-worker-js
Add source image to public.
In this time, the name is "srcImage.jpg"
Edit src/App.tsx
Sample code is here.
import React from 'react';
import './App.css';
import { OpenCVWorkerManager, generateOpenCVDefaultConfig, generateDefaultOpenCVParams } from '@dannadori/opencv-worker-js'
class App extends React.Component{
manager = new OpenCVWorkerManager()
config = generateOpenCVDefaultConfig()
params = generateDefaultOpenCVParams()
srcCanvas = document.createElement("canvas")
dstCanvas = document.createElement("canvas")
componentDidMount = () =>{
document.getRootNode().lastChild!.appendChild(this.srcCanvas)
document.getRootNode().lastChild!.appendChild(this.dstCanvas)
const srcImage = document.createElement("img")
srcImage.onload = () =>{
this.manager.init(this.config).then(()=>{
this.srcCanvas.getContext("2d")!.drawImage(
srcImage, 0, 0, this.srcCanvas.width, this.dstCanvas.height)
return this.manager.predict(this.srcCanvas, this.params)
}).then((res)=>{
console.log(res)
this.dstCanvas.getContext("2d")!.drawImage(res, 0, 0, this.dstCanvas.width, this.dstCanvas.height)
})
}
srcImage.src = "./srcImage.jpg"
}
render = ()=>{
return (
<div className="App">
</div>
);
}
}
export default App;
build and start
$ npm run start
1.0.39
2 years ago
1.0.38
2 years ago
1.0.40
2 years ago
1.0.43
2 years ago
1.0.42
2 years ago
1.0.41
2 years ago
1.0.37
2 years ago
1.0.36
2 years ago
1.0.35
2 years ago
1.0.34
3 years ago
1.0.26
3 years ago
1.0.25
3 years ago
1.0.29
3 years ago
1.0.28
3 years ago
1.0.27
3 years ago
1.0.33
3 years ago
1.0.32
3 years ago
1.0.31
3 years ago
1.0.30
3 years ago
1.0.24
3 years ago
1.0.22
3 years ago
1.0.23
3 years ago
1.0.21
3 years ago
1.0.19
4 years ago
1.0.18
4 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago