diff --git a/examples/clm_image.html b/examples/clm_image.html deleted file mode 100644 index c093cd92..00000000 --- a/examples/clm_image.html +++ /dev/null @@ -1,255 +0,0 @@ - - - - Face Tracker - - - - - - - - - - - - - - - - -
-

Face tracking in images

-
- - -
- -
- - - -

-
-

This is an example of precise face-tracking in an image using the javascript library clmtrackr. To try it out, simply click start.

-

To try it out with your own image, choose a file above by clicking "choose file". If the tracking has problems, try selecting the face in the image manually by clicking "manually select face", and click and hold to drag a square around the face in the image.

 -
-

The image is from the FG-net Talking Face project

- Fork me on GitHub - - -
- - diff --git a/examples/components/App.js b/examples/components/App.js index f0a1d4c1..6c69edb2 100644 --- a/examples/components/App.js +++ b/examples/components/App.js @@ -28,6 +28,14 @@ class App extends React.Component {
{example}
+ + + Fork me on GitHub + ); } diff --git a/examples/components/ClmImageExample.js b/examples/components/ClmImageExample.js index bcb3d906..569ec498 100644 --- a/examples/components/ClmImageExample.js +++ b/examples/components/ClmImageExample.js @@ -1,5 +1,6 @@ import React from 'react'; import classNames from 'classnames'; +import ReactCrop from 'react-image-crop'; import RaisedButton from 'material-ui/RaisedButton'; @@ -9,6 +10,8 @@ import { requestAnimFrame, cancelRequestAnimFrame } from 'clmtrackr/js/utils/ani import TrackerContainer from 'clmtrackr/ui/container/TrackerContainer'; +import '!style!css!react-image-crop/dist/ReactCrop.css'; + import './ClmImageExample.styl'; @@ -16,7 +19,7 @@ const MEDIA_SRC = 'media/franck_02159.jpg'; const MEDIA_SIZE = { width: 625, height: 500 }; -export default class SimpleExample extends React.Component { +export default class ClmImageExample extends React.Component { constructor () { super(); this.state = { @@ -28,7 +31,9 @@ export default class SimpleExample extends React.Component { convergenceStatus: '', fileList: [], - fileIndex: 0 + fileIndex: 0, + + cropActive: false }; this._boundOnFrame = this._onFrame.bind(this); @@ -89,15 +94,28 @@ export default class SimpleExample extends React.Component { requestAnimFrame(this._boundOnFrame); } - _start (e) { + _start (box) { + this._resetTracker(); const trackerContainer = this.refs.trackerContainer; const tracker = this.state.tracker; - tracker.start(trackerContainer.refs.media); + tracker.start(trackerContainer.refs.media, box); this._onFrame(); } _selectBox (e) { - alert('Coming soon!'); + this._resetTracker(); + this.setState({ cropActive: true }); + } + + _selectComplete (crop, pixelCrop) { + const box = [ + pixelCrop.x, + pixelCrop.y, + pixelCrop.width, + pixelCrop.height + ]; + this._start(box); + this.setState({ cropActive: false }); } _selectFile (e) { @@ -124,8 +142,18 @@ export default class SimpleExample extends React.Component { setTimeout(() => { this._loadImage(); }); } + _resetTracker () { + const tracker = this.state.tracker; + const trackerContainer = this.refs.trackerContainer; + const overlayCC = trackerContainer.refs.canvas.getContext('2d'); + overlayCC.clearRect(0, 0, MEDIA_SIZE.width, MEDIA_SIZE.height); + this.setState({ convergenceText: 'n/a', convergenceStatus: '' }); + tracker.stop(); + tracker.reset(); + } + _loadImage () { - const { fileList, fileIndex, tracker } = this.state; + const { fileList, fileIndex } = this.state; if (fileList.indexOf(fileIndex) >= 0) { return; } const reader = new FileReader(); @@ -135,12 +163,7 @@ export default class SimpleExample extends React.Component { }; reader.readAsDataURL(fileList[fileIndex]); - const trackerContainer = this.refs.trackerContainer; - const overlayCC = trackerContainer.refs.canvas.getContext('2d'); - overlayCC.clearRect(0, 0, MEDIA_SIZE.width, MEDIA_SIZE.height); - this.setState({ convergenceText: 'n/a', convergenceStatus: '' }); - tracker.stop(); - tracker.reset(); + this._resetTracker(); } render () { @@ -149,24 +172,46 @@ export default class SimpleExample extends React.Component { loadImageText =

To try it out with your own image, choose a file above by clicking "choose file". If the tracking has problems, try selecting the face in the image manually by clicking "manually select face", and click and hold to drag a square around the face in the image.

; } + let crop; + if (this.state.cropActive) { + const trackerContainer = this.refs.trackerContainer; + const mediaData = trackerContainer.refs.media.toDataURL('image/jpeg'); + const cropCb = this._selectComplete.bind(this); + crop = ( +
+ { + // Set timeout to avoid state error in ReactCrop + setTimeout(() => { cropCb(...args) }); + }} + /> +
+ ); + } + return (
-

Tracking a video tag

- - +

Tracking in an image

+ +
+ + + {crop} +
this._start()} disabled={this.state.isTrackerRunning} /> * + z-index 0 + .crop-wrapper + position absolute + left 0 + top 0 + z-index 50 + .control-row display flex justify-content space-between diff --git a/examples/example.html b/examples/example.html deleted file mode 100644 index b3098344..00000000 --- a/examples/example.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - Face tracker - - - - - - - -
-

Example

-
- - -
-

Printing coordinates of the first 10 points in facial features:

-

- -
- - diff --git a/package.json b/package.json index 7ea1d107..cdc48977 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "numeric": "^1.2.6", "react": "^15.3.1", "react-dom": "^15.3.1", + "react-image-crop": "^1.0.3", "react-redux": "^4.4.5", "react-tap-event-plugin": "^1.0.0", "redux": "^3.6.0",