tinkertoe / waldo-lib

Javascript library for fast and simple template matching without weird opencv bindings!

waldo-lib

Javascript library for fast and simple template matching without weird opencv bindings!

What is template matching?

"Template matching is a technique in digital image processing for finding small parts of an image which match a template image." - wikipedia.org

Quickstart

$ npm install waldo-lib

import { Waldo, WaldoImageData, Match } from 'waldo-lib'

// For browser, use context from HTMLCanvas
const gl = document.createElement('canvas').getContext('webgl')

// For node, use headless-gl
import WebGL from 'gl'
const gl = WebGL(1, 1)


const waldo = new Waldo(gl)

const image: WaldoImageData = { // ImageData from Web API is asignable to WaldoImageData
  width: 6,
  height: 6,
  data: Uint8ClampedArray.from([
    0, 0, 0, 0,   0, 0, 0, 0,           0, 0, 0, 0,            0, 0, 0, 0,   0, 0, 0, 0,   0, 0, 0, 0,
    0, 0, 0, 0,   0, 0, 0, 0,           0, 0, 0, 0,            0, 0, 0, 0,   0, 0, 0, 0,   0, 0, 0, 0,
    0, 0, 0, 0,   255, 255, 255, 255,   255, 255, 255, 255,    0, 0, 0, 0,   0, 0, 0, 0,   0, 0, 0, 0,
    0, 0, 0, 0,   255, 255, 255, 255,   0, 0, 0, 0,            0, 0, 0, 0,   0, 0, 0, 0,   0, 0, 0, 0,
    0, 0, 0, 0,   0, 0, 0, 0,           0, 0, 0, 0,            0, 0, 0, 0,   0, 0, 0, 0,   0, 0, 0, 0,
    0, 0, 0, 0,   0, 0, 0, 0,           0, 0, 0, 0,            0, 0, 0, 0,   0, 0, 0, 0,   0, 0, 0, 0,
  ])
}

const template: WaldoImageData = {
  width: 2,
  height: 2,
  data: Uint8ClampedArray.from([
    255, 255, 255, 255,   255, 255, 255, 255,
    255, 255, 255, 255,   0, 0, 0, 0
  ])
}

const match = waldo.highestSimilarity(image, template)
console.log(match)

/*
{
  location: { x: 1, y: 2 },
  similarity: 1, // Value goes from 0 to 1
}
*/

How to load in ImageData

This library is designed to work with the ImageData type from the Canvas Web API, which is asignable to WaldoImageData.

To load this data from a file in NodeJS, pngjs could be used. See PNG.data, PNG.width and PNG.height.

Docs

The full API Documentation can be found under https://tinkertoe.github.io/waldo-lib