JavaScript??????????????

???????????? ???????[ 2015/2/15 17:38:38 ] ????????WEB???? Javascript Java

??????????????????е?????????????????????????????????????????????????????????????????????????????????????????????Javascript');" target="_self">Javascript?????????Ц????????????????????????д????????????????Щ??????????????Javascript???????????java??????
??????????????tracking.js???????????Eduardo Lundgren??????????????javascript???????????????????????????????????????????????????У??????????????????δ??????м???????????????
??????????????????????????????????????????????м??????????????????????
??????????????????????????????github??????????????????build????У?????????????????????build????С????????????????????μ????????????
????????н?
????Project Folder
??????
??????index.html
??????
????????????assets
??????face.jpg
??????
????????????js
??????tracking-min.js
??????tracking.js
??????
????????????data
????eye-min.js
????eye.js
????face-min.js
????face.js
????mouth-min.js
????mouth.js
????????????js??????????????tracking.js?г????javascript???????????index.html??html????
????HTML????
????<!doctype html>
????<html>
????<head>
????<meta charset="utf-8">
????<title>@tuts Face Detection Tutorial</title>
????<script src="js/tracking-min.js"></script>
????<script src="js/data/face-min.js"></script>
????<script src="js/data/eye-min.js"></script>
????<script src="js/data/mouth-min.js"></script>
????<style>
????.rect{
????border:2px solid#a64ceb;
????left:-1000px;
????position:absolute;
????top:-1000px;
????}
????#img{
????position:absolute;
????top:50%;
????left:50%;
????margin:-173px 0 0-300px;
????}
????</style>
????</head>
????<body>
????<div class="imgContainer">
????<img id="img"src="assets/face.jpg"/>
????</div>
????</body>
????</html>
???????????HTML?????У?????????4??javascript??????tracking.js?????????Щ?????????????????м?????????????????????????д??δ??????????????м?????????????????????????????????????????????ж??????????????????

??????????????????????html???????????
????HTML????
????<!doctype html>
????<html>
????<head>
????<meta charset="utf-8">
????<title>@tuts Face Detection Tutorial</title>
????<script src="js/tracking-min.js"></script>
????<script src="js/data/face-min.js"></script>
????<script src="js/data/eye-min.js"></script>
????<script src="js/data/mouth-min.js"></script>
????<style>
????.rect{
????border:2px solid#a64ceb;
????left:-1000px;
????position:absolute;
????top:-1000px;
????}
????#img{
????position:absolute;
????top:50%;
????left:50%;
????margin:-173px 0 0-300px;
????}
????</style>
????//tracking code.
????<script>
????window.onload=function(){
????var img=document.getElementById('img');
????var tracker=new tracking.ObjectTracker(['face'??'eye'??'mouth']);//Based on parameter it will return an array.
????tracker.setStepSize(1.7);
????tracking.track('#img'??tracker);
????tracker.on('track'??function(event){
????event.data.forEach(function(rect){
????draw(rect.x??rect.y??rect.width??rect.height);
????});
????});
????function draw(x??y??w??h){
????var rect=document.createElement('div');
????document.querySelector('.imgContainer').appendChild(rect);
????rect.classList.add('rect');
????rect.style.width=w+'px';
????rect.style.height=h+'px';
????rect.style.left=(img.offsetLeft+x)+'px';
????rect.style.top=(img.offsetTop+y)+'px';
????};
????};
????</script>
????</head>
????<body>
????<div class="imgContainer">
????<img id="img"src="assets/face.jpg"/>
????</div>
????</body>
????</html>
???????

???????????.
????tracking.ObjectTracker()??????????????и??????????????????????????????????????.
????setStepSize()????????????С.
?????????????????????“track”?????????????????????????????????????????.
??????????????????????л????????????????????????????????????????????x??y????;
??????????.
??????????????????????????????????????????е????????????????????????????????????????????????API?????.
???????????:
???????е????????????.
???????????–????Javascript???沿???
????https://github.com/auduno/headtrackr
????https://github.com/auduno/clmtrackr
???????????HTML5??Canvas????????????????????????????????????????????????????????????????????????????????????????????????????????????????
?????????????????????????????????????????????????????????簲?????????С?