react-get-avatar

React Component that allows you to get an avatar using a webcam or upload from a file and crop it.

See browser support here

Demo

Usage

<GetAvatar width={400} height={400} handleGet={ handleGetAvatar } />

You can use something like this to upload the image on server:

handleGetAvatar(dataURI) {
  const blob = dataURItoBlob(dataURI);
  const formData = new FormData();
  formData.append('image', blob);

  postData('/upload', formData);
}

Installation

npm install react-get-avatar

Properties

| Property | Required | Type | Default Value | Available Values | Description | | ----- | ----- | ----- | ----- | ----- | ----- | | width | true | number | 0 | Any number | Avatar width | | height | true | number | 0 | Any number | Avatar height | | imageType | false | string | image/jpeg | image/jpeg, image/png, image/gif, image/webp | Avatar image type | | imageQuality | false | number | 0.5 | from 0.1 to 1 | Avatar image quality | | className | false | string | | | Component className | | navClassName | false | string | | | Navigation className | | buttonClassName | false | shape({ toggle: string, upload: string, save: string, cancel: string }) | | | Buttons classNames | | handleGet | true | func | | | Callback that returns image dataURI |

More