blur-background-ts

• 🎆 Use latest MediaPipe Solution
• 🎉 Written in TypeScript

Demo

Try demo here

Result example

Blur

handleEffectImage(image, { type: TYPE.BLUR }, ({ imageData, width, height }) => {
  canvas.width = width;
  canvas.height = height;
  canvas.getContext("2d")?.putImageData(imageData, 0, 0);
});

Change background color

handleEffectImage(image, { type: TYPE.BG_COLOR, color: "blue" }, ({ imageData, width, height }) => {
  canvas.width = width;
  canvas.height = height;
  canvas.getContext("2d")?.putImageData(imageData, 0, 0);
});

Crop only person

handleEffectImage(image, { type: TYPE.CROP }, ({ imageData, width, height }) => {
  canvas.width = width;
  canvas.height = height;
  canvas.getContext("2d")?.putImageData(imageData, 0, 0);
});

Change background to new image

handleEffectImage(image, { type: TYPE.IMAGE, imgSrc: bgImg }, ({ imageData, width, height }) => {
  canvas.width = width;
  canvas.height = height;
  canvas.getContext("2d")?.putImageData(imageData, 0, 0);
});

Blur webcam background

stream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = stream;
video.addEventListener(
  "loadeddata",
  () =>
    webcamRunning &&
    handleEffectVideo(video, ({ imageData, width, height }) => {
      canvas5.width = width;
      canvas5.height = height;
      canvas5.getContext("2d")?.putImageData(imageData, 0, 0);
    })
);

Try demo here

Getting started

• Init segmentation

import { imageSegmenter, init, handleEffectVideo, handleEffectImage } from "./lib/index";

await init();

• Blur background image

const image = <HTMLImageElement>document.getElementById("image");
canvas = <HTMLCanvasElement>document.getElementById("canvas");
handleEffectImage(canvas, image, { type: TYPE.BLUR });

Requirement

node 18

Development

git clone https://github.com/cuongle-hdwebsoft/blur-background-ts
npm i
nvm use
npm run dev

QA

1. Why we cannot use putImage and blur effect together?

2. How can I mix 2 image together?

3. What is the core libray that I am using?

4. ImageSegmenter Class

5. Image segmentation guide for web

6. Scaling an image to fit on canvas

7. The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the given ImageData object onto the canvas. If a dirty rectangle is provided, only the pixels from that rectangle are painted. This method is not affected by the canvas transformation matrix.

8. CanvasRenderingContext2D: putImageData() method

9. What is difference between @mediapipe/tasks-vision and @mediapipe/selfie_segmentation on npm?

10. What is the globalCompositeOperation?

Reference

1. https://github.com/akhil-rana/virtual-bg

2. Example image

Contact

Contact to me through email cuong.leminh@hdwebsoft.dev or create an issue.