HAAR.js

Note:FILTER.jsproject, for Image Processing and Computer Vision, includes aHaarDetector pluginwhich can be seen as the continuation of this project.

Feature Detection Library for JavaScript(uses HTML5 canvas on browser and canvas alternative on Node)

Based onViola-Jones Feature Detection Algorithm using Haar Cascades and improvementViola-Jones-Lienhart et al Feature Detection Algorithm

This is a port ofOpenCV C++ Haar Detectionand ofJViolaJones Java) to JavaScript.

there is also aphpversion: HAARPHP

Light-weight (~11kB minified, ~5kB gzipped).

Contents

• Live Playground Examples
• How to Use
• API Reference
• Haar Cascades
• Usage Ideas
• Todo
• Changelog
• Credits

Live Examples

• Interactive Face Detection
• Many Faces Detection
• Interactive Mouth Detection

How To use

You can use theexisting openCV cascadesto build your detectors.

To do this just transform theopencv xml filetojavascriptorjsonformat using thehaartojs(php) tool (in cascades folder)

examples:

to use opencv'shaarcascades_frontalface_alt.xmlinjavascriptdo:

haartojs haarcascades_frontalface_alt.xml>haarcascades_frontalface_alt.js

this creates a javascript file:haarcascades_frontalface_alt.js which you can include in your html file or node file

the variable to use in javascript is similarly haarcascades_frontalface_alt(both in browser and node)

to transform a cascade xml file tojsonformat do:

haartojson haarcascades_frontalface_alt.xml>haarcascades_frontalface_alt.json

The structure of the.jsand.jsonformats is exactly the same, so you can interchange between the two freely

HAAR.js works both in the browser and in Node.js (supporting parallel computations withParallel.js)

NOTEHAAR.js(0.4.4+) (and the generated cascades) supportumd-stylegeneric loading capability for:commonjs / node,amd,browsers script tags

Runing inside the browser

Loading with script tags.

You can run the example face.html or mouth.html inside your browser.

Running inside node

For running in nodejs, the package has a dependency on canvas.

Canvasalternatives for nodejs:

1. CanvasLite
2. node-canvas

To work properlynode-canvasneeds some system dependencies. You can find instruction onhttps://github /Automattic/node-canvas/wiki

You can find an example inside examples/nodes.js for both alternatives.

Example Output

node examples/node.js
processing the picture
[{"x":84,"y":90,"width":202,"height":202,"area":40804}]

Loading with requirejs

As a third option, you can load the library with requireJS, both in the browser in node. There is an example of loading with RequireJS inside node in examples/require.js. The configuration would be the same inside a browser

Supporting parallel computation

Theparallel.jslibrary is included in this repository, see theface.htmlexample for how to use. In most cases using parallel computation (if supported) can be much faster (egeye.htmlexample)

Where to find Haar Cascades xml files to use for feature detection

• OpenCV
• This resource
• search the web:)
• Train your ownwith a little extra helphereandhere
• Ahaarcascade for eyescontributed byMar Canetdemohere

Usage Ideas

• SmileDetectJS
• ObjectDetect(some common ideas with HAAR.js are used)

TODO

• optimize detector for real-time usage on browsers (eg. ->https://github /liuliu/ccv) [DONE use parallel.js]
• add selection option, detection is confined to that selection (eg detect nose while face already detected) [DONE]
• check if some operations can use fixed-point arithmetic, or other micro-optimizations [DONE where applicable]
• keep up with the changes in openCV cascades xml format (will try)

see also:

• Abacusadvanced Combinatorics and Algebraic Number Theory Symbolic Computation library for JavaScript, Python
• MOD33D Modifier Library in JavaScript
• GeometrizeComputational Geometry and Rendering Library for JavaScript
• Plot.jssimple and small library which can plot graphs of functions and various simple charts and can render to Canvas, SVG and plain HTML
• HAAR.jsimage feature detection based on Haar Cascades in JavaScript (Viola-Jones-Lienhart et al Algorithm)
• HAARPHPimage feature detection based on Haar Cascades in PHP (Viola-Jones-Lienhart et al Algorithm)
• FILTER.jsvideo and image processing and computer vision Library in pure JavaScript (browser and node)
• Xpresiona simple and flexible eXpression parser engine (with custom functions and variables support), based onGrammarTemplate,for PHP, JavaScript, Python
• Regex Analyzer/ComposerRegular Expression Analyzer and Composer for PHP, JavaScript, Python
• GrammarTemplategrammar-based templating for PHP, JavaScript, Python
• codemirror-grammartransform a formal grammar in JSON format into a syntax-highlight parser for CodeMirror editor
• ace-grammartransform a formal grammar in JSON format into a syntax-highlight parser for ACE editor
• prism-grammartransform a formal grammar in JSON format into a syntax-highlighter for Prism code highlighter
• highlightjs-grammartransform a formal grammar in JSON format into a syntax-highlight mode for Highlight.js code highlighter
• syntaxhighlighter-grammartransform a formal grammar in JSON format to a highlight brush for SyntaxHighlighter code highlighter
• SortingAlgorithmsimplementations of Sorting Algorithms in JavaScript
• PatternMatchingAlgorithmsimplementations of Pattern Matching Algorithms in JavaScript
• CanvasLitean html canvas implementation in pure JavaScript
• Rasterizerstroke and fill lines, rectangles, curves and paths, without canvaσ
• Gradientcreate linear, radial, conic and elliptic gradients and image patterns without canvas
• css-colorsimple class to parse and manipulate colors in various formats