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