通過tracking.js在畫布上進行臉部跟蹤

tracking.js使得在<img>上檢測臉部相當容易。他們有這個wonderful hello world example，但我想知道是否有人想出如何檢測一個<canvas>元素的臉。通過tracking.js在畫布上進行臉部跟蹤

我想：

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

什麼也沒有發生： -/

來源

2017-04-13 zaph0t

只是看看他們的源代碼。我發現'tracking.trackCanvas_ = function（element，tracker）{'文件'src/tracker.js'中的第166行 – Blindman67

感謝您的檢查！通過您的評論，儘管我意識到他們會將每個圖像或視頻都推送到特徵檢測畫布中。根據代碼，來自「canvas」的圖像應該可以正常工作，但我沒有得到它的工作。這裏有一個基於** hello世界示例**的小提琴，它使用'canvas'而不是'img'。出了什麼問題？ https://jsfiddle.net/atv6w3g8/5/ – zaph0t

我有同樣的問題。只需改變順序。將tracking.track('#canvas', tracker)放在tracker.on後面 - 它應該可以工作。

但是，如果您想要在畫布上「突出顯示」，則應在上下文中繪製而不是繪圖。您也可以直接通過imageDatatracker.track(imgData, width, height) ...玩得開心。

來源

2018-01-08 13:42:18 Pixel

通過tracking.js在畫布上進行臉部跟蹤

回答

相關問題