https://github.com/unvermuthet/waldo-lib
Javascript library for fast and simple template matching without weird opencv bindings!
https://github.com/unvermuthet/waldo-lib
canvas-api computer-vision gpu-acceleration image-analysis image-recognition javascript javascript-library opencv template-matching typescript typescript-library
Last synced: 6 months ago
JSON representation
Javascript library for fast and simple template matching without weird opencv bindings!
- Host: GitHub
- URL: https://github.com/unvermuthet/waldo-lib
- Owner: unvermuthet
- License: gpl-3.0
- Created: 2022-07-28T23:04:32.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-02T13:44:56.000Z (almost 2 years ago)
- Last Synced: 2024-12-18T05:39:22.115Z (6 months ago)
- Topics: canvas-api, computer-vision, gpu-acceleration, image-analysis, image-recognition, javascript, javascript-library, opencv, template-matching, typescript, typescript-library
- Language: TypeScript
- Homepage:
- Size: 875 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# waldo-lib
[](https://badge.fury.io/js/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](https://en.wikipedia.org/w/index.php?title=Template_matching&oldid=1073414135)
# Quickstart
```bash
$ npm install waldo-lib
```
```typescript
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](https://developer.mozilla.org/en-US/docs/Web/API/ImageData), which is asignable to `WaldoImageData`.
To load this data from a file in NodeJS, [pngjs](https://github.com/pngjs/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](https://tinkertoe.github.io/waldo-lib)