martijn
/
arpand
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First

This commit is contained in:
Martijn de Boer 2019-03-12 21:56:29 +01:00
commit 5cb9f71e02
8 changed files with 2562 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/full.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 MiB

BIN
img/fullside.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
img/overlay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
img/source.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 672 KiB

36
index.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<title>Tracking</title>
<script src="script.js"></script>
<script src="tracking.js"></script>
<style>
img {
width: 24%;
}
img,canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body onload="setup();">
<button id="start">Start</button>
<h1>Sources</h1>
<div>
<img id="source" src="img/source.png" />
<img id="overlay" src="img/overlay.png" />
<img id="full" src="img/full.png" />
<img id="fullside" src="img/fullside.png" />
</div>
<h1>Targets</h1>
<div>
<canvas id="cfull" width="397" height="226"></canvas>
<canvas id="cfullside" width="397" height="226"></canvas>
</div>
<h1>Source canvas</h1>
<div>
<canvas id="csource" width="684" height="379"></canvas>
</div>
</body>
</html>

73
script.js Normal file
View File

@ -0,0 +1,73 @@
function setup() {
document.getElementById('start').addEventListener( 'click', detectImage );
}
function detectImage( ev ) {
if ( ev && ev.preventDefault ) {
ev.preventDefault();
}
var sourceImage = document.getElementById( 'source' );
var sourceCanvas = document.getElementById( 'csource' );
var sourceContext = sourceCanvas.getContext( '2d' );
sourceContext.drawImage( sourceImage, sourceCanvas.width * 0.25, sourceCanvas.height * 0.25, sourceCanvas.width * 0.5, sourceCanvas.height * 0.5 );
doImage( 'full' );
doImage( 'fullside' );
}
function doImage( name ) {
var canvas = document.getElementById( 'c' + name );
var context = canvas.getContext( '2d' );
var image = document.getElementById( name );
var sourceCanvas = document.getElementById( 'csource' );
var sourceContext = sourceCanvas.getContext( '2d' );
context.drawImage( image, 0, 0, canvas.width, canvas.height );
var imageDataTarget = context.getImageData( 0, 0, canvas.width, canvas.height );
var imageDataSource = sourceContext.getImageData( 0, 0, sourceCanvas.width, sourceCanvas.height );
var grayTarget = tracking.Image.grayscale(
tracking.Image.blur( imageDataTarget.data, canvas.width, canvas.height, 3 ),
canvas.width, canvas.height
);
var graySource = tracking.Image.grayscale(
tracking.Image.blur( imageDataSource.data, sourceCanvas.width, sourceCanvas.height, 3 ),
sourceCanvas.width, sourceCanvas.height
);
var cornersTarget = tracking.Fast.findCorners( grayTarget, canvas.width, canvas.height );
var cornersSource = tracking.Fast.findCorners( graySource, sourceCanvas.width, sourceCanvas.height );
var descriptorsTarget = tracking.Brief.getDescriptors( grayTarget, canvas.width, cornersTarget );
var descriptorsSource = tracking.Brief.getDescriptors( graySource, sourceCanvas.height, cornersSource );
//var matches = tracking.Brief.reciprocalMatch( cornersSource, descriptorsSource, cornersTarget, descriptorsTarget );
var matches = tracking.Brief.reciprocalMatch( cornersTarget, descriptorsTarget, cornersSource, descriptorsSource );
matches.sort( function(a, b) {
return b.confidence - a.confidence
});
for (var i = 0; i < matches.length; i++) {
console.log(name,matches[i].confidence);
var color = '#' + Math.floor(Math.random()*16777215).toString(16);
//var color = '#ff0000';
context.fillStyle = color;
context.strokeStyle = color;
context.fillRect(normalizePoint(matches[i].keypoint1[0]), normalizePoint(matches[i].keypoint1[1]), 4, 4);
context.fillRect(normalizePoint(matches[i].keypoint2[0])/* + canvas.width*/, normalizePoint(matches[i].keypoint2[1]), 4, 4);
context.beginPath();
context.moveTo(normalizePoint(matches[i].keypoint1[0]), normalizePoint(matches[i].keypoint1[1]));
context.lineTo(normalizePoint(matches[i].keypoint2[0])/* + canvas.width*/, normalizePoint(matches[i].keypoint2[1]));
context.stroke();
}
}
function normalizePoint( x ) {
return x;
}

8
tracking-min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

2445
tracking.js Executable file
View File

File diff suppressed because it is too large Load Diff