https://github.com/richeyphu/dechroma.js

Chroma keying for canvas-manipulated video
https://github.com/richeyphu/dechroma.js

canvas canvas2d chroma-key javascript library npm npm-package typescript utility

Last synced: 6 days ago
JSON representation

Chroma keying for canvas-manipulated video

• Host: GitHub
• URL: https://github.com/richeyphu/dechroma.js
• Owner: richeyphu
• License: mit
• Created: 2023-06-27T11:56:04.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-27T22:21:09.000Z (over 1 year ago)
• Last Synced: 2024-09-15T17:44:22.101Z (2 months ago)
• Topics: canvas, canvas2d, chroma-key, javascript, library, npm, npm-package, typescript, utility
• Language: TypeScript
• Homepage: https://npm.im/dechroma
• Size: 40 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# dechroma.js

[![NPM version](https://img.shields.io/npm/v/dechroma.svg)](https://www.npmjs.com/package/dechroma)

[![NPM total downloads](https://img.shields.io/npm/dt/dechroma)](https://npmjs.org/package/dechroma)

[![install size](https://packagephobia.com/badge?p=dechroma)](https://packagephobia.com/result?p=dechroma)

[![minified size](https://img.shields.io/bundlephobia/min/dechroma)](https://bundlephobia.com/package/dechroma)

Chroma key compositing (e.g., green screen) for HTML canvas-manipulated video, using [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData).

## Install

```sh

$ npm i dechroma

# or

$ yarn add dechroma

# or

$ pnpm add dechroma

```

## Example

```js

import { dechroma } from 'dechroma';

...

const video = document.querySelector('video');

const c = document.querySelector('canvas');

const ctx = c.getContext('2d');

...

video.addEventListener('play', drawVideo);

function drawVideo() {

  ctx.drawImage(video, 0, 0, width, height);

  const frame = ctx.getImageData(0, 0, width, height);

  // Remove green screen

  dechroma(frame, [0, 100], [170, 255], [0, 110]);

  ctx.putImageData(frame, 0, 0);

  requestAnimationFrame(drawVideo);

}

```

## License

Licensed under the [MIT License](LICENSE).