Avatar editor
An avatar editor component for Vue 3.
``
This repository fork from https://github.com/MatijaNovosel/avatar-editor
``
## 🚀 Installation
Install using your package manager of choice:
```bash
yarn add avatar-editor
```
## ✨ Features
- Cropping images of any format
- Exporting said image when cropped in base64 format
## 📺 Demo
https://matija-components.vercel.app/avatar-editor
## ⚙️ Usage
Import the component locally or define it globally and include the css file:
```vue
```
The scale of the zoom is controlled from the outside through the `scale` prop.
To save the image call the exposed `getImageScaled` function.
## 📃 Props
| Name | Type | Default | Description |
| --------------- | ---------- | -------------- | -------------------------------------------------------------------------------------- |
| `v-model:scale` | `number` | 1 | Standard two way input of the scale property which controls how zoomed in the image is |
| `width` | `number` | 200 | Width of the avatar editor |
| `height` | `number` | 200 | Height of the avatar editor |
| `border` | `number` | 25 | Border width of the outer selection area |
| `borderRadius` | `number` | 0 | Border radius of the inner selection area, set to high values for a full circle |
| `color` | `number[]` | [0, 0, 0, 0.5] | RGBA value of the outer selection area |
## 🎺 Events
| Name | Type | Description |
| ------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `image-ready` | `(scale: number) => void` | An event that fires off after the selected picture is done loading, used for setting the ideal scale of the component |
## 🎯 Exposed functions
| Name | Type | Description |
| ---------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `getImageScaled` | `() => HTMLCanvasElement` | Fetches the current image inside of the inner selection area as a HTMLCanvasElement. It is advised to convert it to a familiar format further using the `toDataUrl` canvas function such as base64. |