Browsers support

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

Getting started

Installing

npm install face-age --save

yarn add face-age --save

Direct <script> include

<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)
})

Contacts

Website: getfaceage.com

Email: [email protected]