JS Face Age


Browsers support

Firefox
Firefox
Chrome
Chrome
Safari
Safari
Edge
Edge
IE
IE11
31+ ✔ 35+ ✔ 6+ ✔ Edge ✔ (IE11)


Getting started

Installing
npm install face-age --save

or

yarn add face-age --save
Direct <script> include

Another way is to directly include it in your html

<script src="https://cdn.jsdelivr.net/npm/face-age"></script>


Usage

import FaceAge from 'face-age'

To create a basic analysis with minimal configuration, write the following:

const options = {
    faceageId: '<Face Age Client Id>',
    type: 'skincare-analyzer',
}
const faceAge = new FaceAge(document.getElementById('FaceAge-module'), options)
faceAge.render()

Options

You can set the analysis options with new FaceAge(). 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.

Methods

After analyzing the image, you should get the result. You can use the following commands for this.

getSkins()

To get information

faceAge.getSkins()

onload()

Using this function, you can call a specific command (for example, loading products) after the analysis is finished

faceAge.onload((response) => {
    console.log(response)
})