chubiao
/
yl-gzh


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!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>