Firefox |
Chrome |
Safari |
Edge |
IE11 |
---|---|---|---|---|
31+ ✔ | 35+ ✔ | 6+ ✔ | Edge ✔ | (IE11) ✔ |
npm install face-age --save
or
yarn add face-age --save
Another way is to directly include it in your html
<script src="https://cdn.jsdelivr.net/npm/face-age"></script>
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()
You can set the analysis options with new FaceAge()
.
If you want to change the global default options, you can use object options
.
String
'skincare'
'skincare'
: create a new crop box'skincare-analyze'
: move the canvasDefine 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.
Array
['dark_circle', 'eye_bag', 'eye_wrinkles', 'deep_wrinkles', 'wrinkles', 'acnes', 'pores', 'pigment']
You can set it to display more limited analysis information.
Boolean
true
You can set it to use the camera to load the image.
Boolean
true
You can specify whether users can upload images.
Boolean
true
Ability to display analysis points on the face.
After analyzing the image, you should get the result. You can use the following commands for this.
To get information
faceAge.getSkins()
Using this function, you can call a specific command (for example, loading products) after the analysis is finished
faceAge.onload((response) => {
console.log(response)
})