0

tracking.js makes it fairly easy to detect a face on an <img>. They have a wonderful hello world example for this, but I was wondering if anyone figured out yet how to detect a face on a <canvas> element.

I tried: 

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

Nothing happens :-/

zaph0t
  • 101
  • 2
  • 11
  • Just have a look at their source code. I found `tracking.trackCanvas_ = function(element, tracker) {` line 166 in the file `src/tracker.js` – Blindman67 Apr 14 '17 at 02:32
  • Thanks for checking! Through your comment though I realised that they push every image or video into a canvas for feature detection. According to the code, an image from a `canvas` should work just fine, but I don't get it to work. Here's a fiddle based on the **hello world example** using `canvas` instead of `img`. What's going wrong? https://jsfiddle.net/atv6w3g8/5/ – zaph0t Apr 14 '17 at 21:17

1 Answers1

0

I had the same issue. Just change the order. Put tracking.track('#canvas', tracker) behind the tracker.on - section and it should work.

But if you want to "highlight" it on a canvas you should draw at the context instead of plotting. You can also pass the imageData directly tracker.track(imgData, width, height)... Have fun.

Lotus91
  • 1,127
  • 4
  • 18
  • 31
Pixel
  • 16