106 lines
3.3 KiB
HTML
106 lines
3.3 KiB
HTML
<!doctype 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="../node_modules/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>
|