/
FaceImageViewer.js
57 lines (54 loc) · 1.7 KB
/
FaceImageViewer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, { Component, PropTypes } from 'react'
import { classNames } from 'support/helpers'
import InputImageViewer from 'components/content/InputImageViewer'
import styles from './FaceImageViewer.scss'
class FaceImageViewer extends Component {
constructor () {
super()
this.renderCanvas = this.renderCanvas.bind(this)
}
componentDidMount () {
this.ctx = this.canvas.getContext('2d')
}
renderCanvas (event) {
this.ctx.drawImage(event.target, 0, 0)
}
drawRects (ctx) {
const { shapes = [] } = this.props
shapes.forEach(({ topLabel = '', bottomLabel = '', color = 'green', dimension }) => {
const { x, y, width, height } = dimension
ctx.strokeStyle = color
ctx.font = '13px san-serif'
ctx.strokeText(topLabel, x, y - 3)
ctx.strokeRect(x, y, width, height)
if (bottomLabel) {
ctx.fillStyle = color
ctx.fillRect(x, y + height, width, 18)
ctx.strokeStyle = 'white'
ctx.strokeText(bottomLabel, x + 10, y + height + 13)
}
})
}
render () {
const { className, inputImageName } = this.props
if (this.ctx) {
this.drawRects(this.ctx)
}
return (
<div className={classNames([styles.base, className])}>
<InputImageViewer name={inputImageName}
ref={el => { this.img = el }}
onLoad={this.renderCanvas}
className={styles.image}
/>
<canvas width='480' height='360' ref={el => { this.canvas = el }} />
</div>
)
}
}
FaceImageViewer.propTypes = {
className: PropTypes.string,
inputImageName: PropTypes.string,
shapes: PropTypes.array // {topLabel, bottomLabel, color, dimension: {x, y, width, height}}
}
export default FaceImageViewer