wie Bild nach Gesichtserkennung in Tracking js

Ich verwende tracking js für Gesichtserkennung. Ich habe das Gesicht erfolgreich erkannt, aber ich weiß nicht, wie ich den Bildrahmen erfassen soll. Ich möchte das erkannte Gesicht als Bild speichern. Das ist meine HTML-Seite:wie Bild nach Gesichtserkennung in Tracking js

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>tracking.js - face with camera</title> 

    <script src="../tracking.js-master/build/tracking-min.js" type="text/javascript"></script> 
    <script src="../tracking.js-master/build/data/face-min.js"></script> 

    <link rel="stylesheet" type="text/css" href="face.css"> 

</head> 
<body> 

    <div class="demo-frame"> 
     <video id="video" class="face-video" width="740" height="560" preload autoplay loop muted></video> 
     <canvas id="canvas" class="face-canvas" width="740" height="560"> </canvas> 
    </div> 

    <script src="faceDetection.js" type="text/javascript"></script> 

</body> 
</html>

Und das ist mein faceDetection.js Datei:

window.onload = function() { 
    var video = document.getElementById('video'); 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var tracker = new tracking.ObjectTracker('face'); 
    tracker.setInitialScale(6); 
    tracker.setStepSize(2); 
    tracker.setEdgesDensity(0.1); 
    tracking.track('#video', tracker, { camera: true }); 

    tracker.on('track', function(event) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    event.data.forEach(function(rect) { 
     context.strokeStyle = '#ff0000'; 
     context.strokeRect(rect.x, rect.y, rect.width, rect.height); 
     context.font = '11px Helvetica'; 
     context.fillStyle = "#fff"; 
     context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11); 
     context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22); 
    }); 
    }); 
};

Quelle

2016-11-04 Jai Prak

Bitte nehmen Sie sich etwas Zeit und lesen Sie dieses SO Thema: http://stackoverflow.com/help/someone-answers Danke! –

Sie getUserMedia api verwenden könnten und download Attribut auf <a> Element verwenden. Es ist ein bisschen schwierig, und es wird auf allen Browsern nicht zur Verfügung:

Zuerst das Video auf Leinwand ziehen:

tracker.on('track', function(event) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    event.data.forEach(function(rect) { 
    context.strokeStyle = '#ff0000'; 
    context.strokeRect(rect.x, rect.y, rect.width, rect.height); 
    context.font = '11px Helvetica'; 
    context.fillStyle = "#fff"; 
    context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11); 
    context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22); 
    context.drawImage(video, rect.x, rect.y, rect.width, rect.height, rect.x, rect.y, rect.width, rect.height); 
    }); 
});

Erstellen Sie eine Methode den Schnappschuss auszulösen:

var snapshot = function() { 
    if (localMediaStream) { 
    document.querySelector('a').href = canvas.toDataURL('image/webp'); 
    } 
} 

video.addEventListener('click', snapshot, false);

eine Referenz halten in den Benutzermedium:

navigator.getUserMedia({video: true}, function(stream) { 
    localMediaStream = stream; 
}, function(error){console.error(error)});

eine grobe Demo mit allen Code in Aktion here . Klicken Sie auf das Video und ein Bild sollte gespeichert werden (Hinweis: Verwenden der neuesten Chrome; Sie müssen möglicherweise Feinabstimmung Koordinaten; Achten Sie auf Schnappschuss nach der Erkennung richtig gemacht wurde).

Quelle

2016-11-04 09:56:08

wie Bild nach Gesichtserkennung in Tracking js

Antwort

Verwandte Themen