tracking
Version:
A modern approach for Computer Vision on the web.
106 lines (85 loc) • 3.33 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - feature matching</title>
<link rel="stylesheet" href="assets/demo.css">
<script src="../build/tracking-min.js"></script>
<script src="../../dat-gui/build/dat.gui.min.js"></script>
<style>
.demo-container {
background-color: black;
}
#image1, #image2 {
position: absolute;
left: -1000px;
top: -1000px;
}
#canvas {
position: absolute;
left: 50%;
top: 50%;
margin-left: -393px;
margin-top: -147px;
}
</style>
</head>
<body>
<div class="demo-title">
<p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － match similar feature points in two images</p>
</div>
<div class="demo-frame">
<div class="demo-container">
<img id="image1" src="assets/brief1.png" />
<img id="image2" src="assets/brief2.png" />
<canvas id="canvas" width="786" height="295"></canvas>
</div>
</div>
<script>
window.onload = function() {
var width = 393;
var height = 295;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2');
window.descriptorLength = 256;
window.matchesShown = 30;
window.blurRadius = 3;
var doMatch = function() {
tracking.Brief.N = window.descriptorLength;
context.drawImage(image1, 0, 0, width, height);
context.drawImage(image2, width, 0, width, height);
var imageData1 = context.getImageData(0, 0, width, height);
var imageData2 = context.getImageData(width, 0, width, height);
var gray1 = tracking.Image.grayscale(tracking.Image.blur(imageData1.data, width, height, blurRadius), width, height);
var gray2 = tracking.Image.grayscale(tracking.Image.blur(imageData2.data, width, height, blurRadius), width, height);
var corners1 = tracking.Fast.findCorners(gray1, width, height);
var corners2 = tracking.Fast.findCorners(gray2, width, height);
var descriptors1 = tracking.Brief.getDescriptors(gray1, width, corners1);
var descriptors2 = tracking.Brief.getDescriptors(gray2, width, corners2);
var matches = tracking.Brief.reciprocalMatch(corners1, descriptors1, corners2, descriptors2);
matches.sort(function(a, b) {
return b.confidence - a.confidence;
});
for (var i = 0; i < Math.min(window.matchesShown, matches.length); i++) {
var color = '#' + Math.floor(Math.random()*16777215).toString(16);
context.fillStyle = color;
context.strokeStyle = color;
context.fillRect(matches[i].keypoint1[0], matches[i].keypoint1[1], 4, 4);
context.fillRect(matches[i].keypoint2[0] + width, matches[i].keypoint2[1], 4, 4);
context.beginPath();
context.moveTo(matches[i].keypoint1[0], matches[i].keypoint1[1]);
context.lineTo(matches[i].keypoint2[0] + width, matches[i].keypoint2[1]);
context.stroke();
}
};
doMatch();
var gui = new dat.GUI();
gui.add(window, 'descriptorLength', 128, 512).step(32).onChange(doMatch);
gui.add(window, 'matchesShown', 1, 100).onChange(doMatch);
gui.add(window, 'blurRadius', 1.1, 5).onChange(doMatch);
}
</script>
</body>
</html>