hallysonh/ngx-faceavatar

Angular component to display an image as avatar using (if possible) the browser's native face recognition to focus on a face in the image.

NgxFaceAvatar

This is a Angular component to display an image as avatar using, if enable, the browser's native face recognition to focus on a face in the image. The algorithm always focus on the biggest face on the image.

Demo

You can check the demo page here.

Properties

• src: (Required)

  Source to be displayed. It can be a image url or a Image File.

• dim (Dimension): (Optional) Default value: 300

  Define the width and height of the element

• padding: (Optional) Default value: 10

  Define the space displayed around the detected face (if any was detected).

• rounded: (Optional) Default value: true

  Define if the component will be a circle (true) or a square (false).

Getting started

Install via npm or yarn:

yarn add ngx-faceavatar

Import the module

import { NgxFaceAvatarModule } from 'ngx-faceavatar';
// ...

@NgModule(
  // ...
  imports: [NgxFaceAvatarModule],
  // ...
})

and add the ngx-faceavatar to your component template:

<ngx-faceavatar [src]="imageSrc" dim="200" padding="20" rounded="false"></ngx-faceavatar>

Enable Face Recognition

In chrome, go to :

chrome://flags/#enable-experimental-web-platform-features

And enable the Experimental Web Platform features section.

After enabling it you should see a Relaunch Now button on the bottom of the screen.

After the relaunch, you can see the component focusing on recognized faces.