1.0.61 • Published 3 years ago

@dannadori/bodypix-worker-js v1.0.61

Weekly downloads
4
License
MIT
Repository
github
Last release
3 years ago

This is webworker module for Bodypix.

bodypix

image

Install

$ npm install \@dannadori/bodypix-worker-js

API

generateBodyPixDefaultConfig: () => BodyPixConfig;
generateDefaultBodyPixParams: () => BodyPixOperationParams;
createForegroundImage: (srcCanvas: HTMLCanvasElement, prediction: SemanticPersonSegmentation) => ImageData

BodypixWorkerManager
init(config?: BodyPixConfig | null): Promise<unknown>;
predict(targetCanvas: HTMLCanvasElement, params: BodyPixOperationParams): Promise<any>;

Configuration and Parameter

export interface BodyPixConfig {
    browserType: BrowserType;
    model: ModelConfig;
    processOnLocal: boolean;
}

export interface BodyPixOperationParams {
    type: BodypixFunctionType;
    segmentPersonParams: PersonInferenceConfig;
    segmentPersonPartsParams: PersonInferenceConfig;
    segmentMultiPersonParams: MultiPersonInstanceInferenceConfig;
    segmentMultiPersonPartsParams: MultiPersonInstanceInferenceConfig;
    processWidth: number;
    processHeight: number;
}

export declare enum BodypixFunctionType {
    SegmentPerson = 0,
    SegmentMultiPerson = 1,
    SegmentPersonParts = 2,
    SegmentMultiPersonParts = 3
}

Step by step

Create environment and install package

$ npx create-react-app demo  --template typescript
$ cd demo/
$ npm install
$ npm install @dannadori/bodypix-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 {
  BodypixWorkerManager, generateBodyPixDefaultConfig,
  generateDefaultBodyPixParams, createForegroundImage,
} from '@dannadori/bodypix-worker-js'

class App extends React.Component{

  manager = new BodypixWorkerManager()
  config = generateBodyPixDefaultConfig()
  params = generateDefaultBodyPixParams()

  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)
        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.61

3 years ago

1.0.60

3 years ago

1.0.49

3 years ago

1.0.51

3 years ago

1.0.50

3 years ago

1.0.55

3 years ago

1.0.54

3 years ago

1.0.53

3 years ago

1.0.52

3 years ago

1.0.59

3 years ago

1.0.58

3 years ago

1.0.57

3 years ago

1.0.56

3 years ago

1.0.44

3 years ago

1.0.43

3 years ago

1.0.48

3 years ago

1.0.47

3 years ago

1.0.46

3 years ago

1.0.45

3 years ago

1.0.42

4 years ago

1.0.39

4 years ago

1.0.38

4 years ago

1.0.40

4 years ago

1.0.41

4 years ago

1.0.37

4 years ago

1.0.36

4 years ago

1.0.35

4 years ago

1.0.34

4 years ago

1.0.33

4 years ago

1.0.32

4 years ago

1.0.31

4 years ago

1.0.29

4 years ago

1.0.30

4 years ago

1.0.28

5 years ago

1.0.27

5 years ago

1.0.26

5 years ago

1.0.25

5 years ago

1.0.24

5 years ago

1.0.23

5 years ago

1.0.22

5 years ago

1.0.21

5 years ago

1.0.20

5 years ago

1.0.19

5 years ago

1.0.18

5 years ago

1.0.17

5 years ago

1.0.16

5 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.7

5 years ago