74 lines
1.8 KiB
HTML
74 lines
1.8 KiB
HTML
<!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>
|