как захватить изображение после обнаружения лица в отслеживании js

Я использую tracking js для обнаружения лица. Я успешно обнаружил лицо, но не знаю, как захватить рамку изображения. Я хочу сохранить обнаруженное лицо как изображение. Это мой HTML-страница:как захватить изображение после обнаружения лица в отслеживании 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>

И это мой faceDetection.js файл:

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); 
    }); 
    }); 
};

источник

2016-11-04 Jai Prak

, пожалуйста, найдите время и прочитайте эту тему: http://stackoverflow.com/help/someone-answers Спасибо! –

Вы можете использовать getUserMedia API и использовать download атрибут <a> элемента. Это немного сложнее, и он не будет доступен на всех браузерах:

Первый рисовать видео на холсте:

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); 
    }); 
});

Создайте метод для запуска снимка:

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

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

сохранить ссылку пользовательские СМИ:

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

См приблизительной демо со всем кодом в действии here , Нажмите на видео, и изображение должно быть сохранено (Примечание: использование новейшего Chrome; вам может потребоваться тонкая настройка координат; обязательно щелкните моментальный снимок после того, как обнаружение выполнено правильно).

источник

2016-11-04 09:56:08

как захватить изображение после обнаружения лица в отслеживании js

ответ

Смежные вопросы