tracking实现颜色追踪、人脸检测效果
代码语言:html
所属分类:其他
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <script src="http://repo.bfw.wiki/bfwrepo/js/vconsole.min.js"></script> <meta charset="utf-8"> <title>tracking.js - color with video</title> <script id="bfwone" data="dep=tracking-min|dat.gui.min|stats.min|color_camera_gui&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); tracking.ColorTracker.registerColor('purple', function(r, g, b) { var dx = r - 120; var dy = g - 60; var dz = b - 210; if ((b - g) >= 100 && (r - g) >= 60) { return true; } return dx * dx + dy * dy + dz * dz < 3500; }); var tracker = new tracking.ColorTracker(['yellow', 'purple']); tracker.setMinDimension(5); tracking.track('#video', tracker); tracker.on('track', function(event) { context.clearRect(0, 0, canvas.width, canvas.height); event.data.forEach(function(rect) { if (rect.color === 'custom') { rect.color = tracker.customColor; } context.strokeStyle = rect.color; 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); }); }); initGUIControllers(tracker); }); </script> <style> .demo-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0