React.js wrapper for Face Age to build interactive visualizations in react.
Download and Installation
Installing
npm install face-age react-face-age
or
yarn add face-age react-face-age
Usage
import ReactFaceAge from "react-face-age";
To create a basic analysis with minimal configuration, write the following:
class App extends Component {
constructor(props) {
super(props);
this.state = {
options: {
faceageId: '<Face Age Client Id>',
type: 'skincare-analyzer'
}
}
}
onload (re) {
console.log(re);
}
render() {
return (
<ReactFaceAge
options={this.state.options}
onLoad={this.onload}
/>
)
}
}
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: getfaceage.com
Email: dev@getfaceage.com