如何在跟蹤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

請花點時間閱讀這個SO主題：http://stackoverflow.com/help/someone-answers謝謝！ –

你可以使用getUserMedia API和<a>元素上使用download屬性。這是一個有點棘手，它並不適用於所有的瀏覽器：

先畫在畫布上的視頻：

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中的人臉檢測後捕獲圖像

回答

相關問題