Permalink
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>tracking.js - feature detection</title> | |
<link rel="stylesheet" href="assets/demo.css"> | |
<script src="../build/tracking-min.js"></script> | |
<script src="../node_modules/dat.gui/build/dat.gui.min.js"></script> | |
<style> | |
.demo-container { | |
background: #131112; | |
} | |
#image { | |
position: absolute; | |
left: -1000px; | |
top: -1000px; | |
} | |
#canvas { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
margin: -200px 0 0 -200px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="demo-title"> | |
<p><a href="http://trackingjs.com" target="_parent">tracking.js</a> - detect feature points on a image</p> | |
</div> | |
<div class="demo-frame"> | |
<div class="demo-container"> | |
<img id="image" src="assets/fast.png" /> | |
<canvas id="canvas" width="400" height="400"></canvas> | |
</div> | |
</div> | |
<script> | |
window.onload = function() { | |
var width = 400; | |
var height = 400; | |
var canvas = document.getElementById('canvas'); | |
var context = canvas.getContext('2d'); | |
var image = document.getElementById('image'); | |
window.fastThreshold = 10; | |
var doFindFeatures = function() { | |
tracking.Fast.THRESHOLD = window.fastThreshold; | |
context.drawImage(image, 0, 0, width, height); | |
var imageData = context.getImageData(0, 0, width, height); | |
var gray = tracking.Image.grayscale(imageData.data, width, height); | |
var corners = tracking.Fast.findCorners(gray, width, height); | |
for (var i = 0; i < corners.length; i += 2) { | |
context.fillStyle = '#f00'; | |
context.fillRect(corners[i], corners[i + 1], 3, 3); | |
} | |
}; | |
doFindFeatures(); | |
var gui = new dat.GUI(); | |
gui.add(window, 'fastThreshold', 0, 100).onChange(doFindFeatures); | |
} | |
</script> | |
</body> | |
</html> |