vue3-face-age/README.md

Vue 3 wrapper for Face Age

<br />

<p align="center"><img src="https://getfaceage.com/wp-content/themes/faceage/assets/images/logo.svg" width="232px"></p>


<p align="center">Vue 3 component for <a href="https://www.npmjs.com/package/face-age">Face Age</a> to build interactive visualizations in vue.</p>

<p align="center"><a href="https://getfaceage.com/"><img
      src="https://facegpt.app/static/hero_light.png"></a></p>
<br />


## Download and Installation

##### Installing

```bash
npm install face-age vue3-face-age
```

<p>or</p>

```bash
yarn add face-age vue3-face-age
```


## Usage

```javascript
import VueFaceAge from "vue3-face-age";

export default {
  components: {
    faceage: VueFaceAge
  },
  data: function() {
    return {
      faceAgeOptions: {
        faceageId: '<Face Age Client Id>',
        type: 'skincare-analyzer'
      }
    };
  },
  methods: {
    onLoad(req) {
      console.log(req);
    },
  }
}
```

To use face analysis with minimal settings, write as follows:

```vue
<template>
  <div class="demo">
    <faceage :options="faceAgeOptions" :onLoad="onLoad"></faceage>
  </div>
</template>
```



## Options

If you want to change the global default options, you can use object `options`.


### type

- Type: `String`
- Default: `'skincare'`
- Options:
    - `'skincare'`: create a new crop box
    - `'skincare-analyze'`: move the canvas

Define the analysis display mode. If you set the type to skincare, only the possibility of receiving the image will be displayed, while the skincare-analyze value is entered, the image will be received and the received data will also be displayed.


### access

- Type: `Array`
- Default: `['dark_circle', 'eye_bag', 'eye_wrinkles', 'deep_wrinkles', 'wrinkles', 'acnes', 'pores', 'pigment']`

You can set it to display more limited analysis information.

### showCamera

- Type: `Boolean`
- Default: `true`

You can set it to use the camera to load the image.

### showUpload

- Type: `Boolean`
- Default: `true`

You can specify whether users can upload images.



### showFacePoint

- Type: `Boolean`
- Default: `true`

Ability to display analysis points on the face.



## Contacts

Website: <a href="https://getfaceage.com/">getfaceage.com</a>

Email: <a href="dev@getfaceage.com">dev@getfaceage.com</a>