Face-Tracking auf Leinwand über tracking.js

Question

tracking.js macht es ziemlich einfach, ein Gesicht auf einem <img> zu erkennen. Sie haben eine wonderful hello world example dafür, aber ich fragte mich, ob jemand noch herausgefunden, wie man ein Gesicht auf einem <canvas> Element erkennen kann.

Ich habe versucht:

var canvas = document.getElementById('canvas'), 
context = canvas.getContext('2d'), 
img = img = context.getImageData(0, 0, canvas.width, canvas.height); 

var tracker = new tracking.ObjectTracker(['face']); 
tracker.setStepSize(1.7); 

tracking.track('#canvas', tracker); 

tracker.on('track', function(event) { 
    event.data.forEach(function(rect) { 
    window.plot(rect.x, rect.y, rect.width, rect.height); 
    }); 
}); 

window.plot = function(x, y, w, h) { 
    var rect = document.createElement('div'); 
    document.querySelector('#preview').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'; 
    rect.style.borderColor = '#ff0000'; 
}; 

Nichts geschieht: -/

Answer 1

ich hatte das gleiche Problem. Ändern Sie einfach die Reihenfolge. Setzen Sie tracking.track('#canvas', tracker) hinter den tracker.on - Abschnitt und es sollte funktionieren.

Aber wenn Sie es auf einer Leinwand "markieren" möchten, sollten Sie im Kontext zeichnen anstatt zu zeichnen. Sie können auch die imageData direkt tracker.track(imgData, width, height) übergeben ... Viel Spaß.