Vue and Vue3 Face Age

• Download and Installation
• Usage
• Options

Download and Installation

Installing

npm install face-age vue-face-age

or

yarn add face-age vue-face-age

Usage

import VueFaceAge from "vue-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:

<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.