1.0.29 • Published 2 years ago
@dannadori/u2net-portrait-worker-js v1.0.29
U^2-Net Portrait Drawing
Install
## install
$ npm install @dannadori/u2net-portrait-worker-js
$ cp node_modules/\@tensorflow/tfjs-backend-wasm/dist/tfjs-backend-wasm.wasm public/
API
generateU2NetPortraitDefaultConfig: () => U2NetPortraitConfig;
generateDefaultU2NetPortraitParams: () => U2NetPortraitOperationParams;
createForegroundImage: (srcCanvas: HTMLCanvasElement, prediction: number[][]) => ImageData;
export declare class U2NetPortraitWorkerManager {
init(config: U2NetPortraitConfig | null): Promise<void>;
predict(targetCanvas: HTMLCanvasElement, params?: U2NetPortraitOperationParams): Promise<number[][]>;
}
Configuration and Parameter
export interface U2NetPortraitConfig {
browserType: BrowserType;
processOnLocal: boolean;
useTFWasmBackend: boolean;
wasmPath: string;
modelPath: string;
workerPath: string;
}
export interface U2NetPortraitOperationParams {
type: U2NetPortraitFunctionType;
processWidth: number;
processHeight: number;
}
export declare enum U2NetPortraitFunctionType {
Portrait = 0,
xxx = 1
}
Step by step
Create environment and install package
$ npx create-react-app demo --template typescript
$ cd demo/
$ npm install
$ npm install @dannadori/u2net-portrait-worker-js
$ cp node_modules/\@tensorflow/tfjs-backend-wasm/dist/tfjs-backend-wasm.wasm public/
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 { generateDefaultU2NetPortraitParams, generateU2NetPortraitDefaultConfig, U2NetPortraitWorkerManager, createForegroundImage } from '@dannadori/u2net-portrait-worker-js'
class App extends React.Component{
manager = new U2NetPortraitWorkerManager()
config = (()=>{
const c = generateU2NetPortraitDefaultConfig()
c.useTFWasmBackend = false
c.wasmPath = ""
c.modelPath="/u2net-portrait_192/model.json"
return c
})()
params = (()=>{
const p = generateDefaultU2NetPortraitParams()
p.processHeight=192
p.processWidth=192
return p
})()
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)=>{
const foreground = createForegroundImage(this.srcCanvas, res)
this.dstCanvas.getContext("2d")!.putImageData(foreground, 0, 0)
})
}
srcImage.src = "./srcImage.jpg"
}
render = ()=>{
return (
<div className="App">
</div>
);
}
}
export default App;
build and start
$ npm run start
1.0.29
2 years ago
1.0.28
2 years ago
1.0.27
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.26
2 years ago
1.0.25
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.19
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.11
3 years ago
1.0.12
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago