React Component that allows you to get an avatar using a webcam or upload from a file and crop it.
See browser support here
<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);
}npm install react-get-avatar
| 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 |
