FILTER.js

A pure JavaScript Library for Image/Video Processing, Filtering and Computer Vision

This is a library for processing images/video in pure JavaScript using HTML5 features like Canvas, Web Workers, WebAssembly and WebGL or alternatives in Node.js (eg CanvasLite, node-canvas, node-gl, node processes).

version 1.14.0 in progress (321 kB minified)

Contents

• Live Examples
• Browser Support
• Credits
• References
• Features
• API Reference
• ChangeLog
• Todo

Live Examples

• Image Processing with Filter.js (synchronous/parallel/webgl/wasm)
• Video Processing with Filter.js (synchronous/webgl/wasm)
• Sound Visualization with Filter.js (Trioptic)
• Cartoonify Yourself with Filter.js
• Filter.js with Three.js
• Filter.js in Node.js

Browser Support

Credits

Some filters code has been adapted from open source libraries and/or public domain code, see comments in source code for details.

• Image Processing Library in Java
• AS3 Image Processing Library
• OpenCV
• HAAR.js

Features

The framework defines an Image class, which represents a proxy for an Image, a number of utilities like Color class and 14 generic Filter types plus various Plugins and Extra filters (with support for (low-level) CPU and GPU parallel processing transparently both for browser and nodejs)

0. AbstractFilter
1. ColorTableFilter
2. ColorMatrixFilter (analogous to the ActionScript filter)
3. ColorMapFilter
4. AffineMatrixFilter
5. GeometricMapFilter
6. DisplacementMapFilter (analogous to ActionScript filter)
7. ConvolutionMatrixFilter (analogous to the ActionScript filter)
8. MorphologicalFilter
9. StatisticalFilter
10. BlendFilter
11. DimensionFilter
12. CompositeFilter (an abstraction of a container for multiple filters)
13. InlineFilter (create inline filters dynamically at run-time using your custom functions)
14. FrequencyFilter (frequency domain filters)
15. Extra Filters (extra filters which cover a wider range of functionality and use cases)

Each of the generic filters is prototype but it also includes a number of implementation filters like grayscale , colorize , threshold , gaussBlur , laplace , emboss , gamma, twirl and so on.. (depending on type of filter)

CPU Parallel Processing for browser and nodejs: support CPU parallel procesing with filter Workers in an intuitive and transparent way, see examples.

GPU Parallel Processing for browser and nodejs: support GPU/WebGL parallel procesing with GLSL filters in an intuitive and transparent way, see examples.

Mix CPU/GPU filters transparently

Fast CPU Assembly Code for browser and nodejs: support assembly coded filters, see examples.

Map/Reduce functionality

Image Blending Modes (analogous to SVG blend modes)

TIP: You can create your custom build of the library with the filters/plugins you choose. Each filter and plugin is independent and can be used in a mix-n-match manner, as long as the core classes are always included. Change the dependencies file to include your own selection of filters and plugins for your custom build

Todo

• make WASM versions of filters where possible [DONE]
• make GLSL versions of filters where possible [DONE]
• make convolutions/statistics faster [DONE partially]
• add full support for Node.js [DONE]
• add support for Parallel Processing using Web Workers and/or Asynchronous Processing [DONE]
• use fixed-point arithmetic, micro-optimizations where possible [DONE]
• add caching of filter parameters where applicable [DONE]
• increase performance for Opera, IE [DONE]

see also:

• Abacus Computer Algebra and Symbolic Computation System for Combinatorics and Algebraic Number Theory for JavaScript and Python
• TensorView view array data as multidimensional tensors of various shapes efficiently
• Geometrize Computational Geometry and Rendering Library for JavaScript
• Plot.js simple and small library which can plot graphs of functions and various simple charts and can render to Canvas, SVG and plain HTML
• CanvasLite an html canvas implementation in pure JavaScript
• Rasterizer stroke and fill lines, rectangles, curves and paths, without canvas
• Gradient create linear, radial, conic and elliptic gradients and image patterns without canvas
• css-color simple class to parse and manipulate colors in various formats
• MOD3 3D Modifier Library in JavaScript
• HAAR.js image feature detection based on Haar Cascades in JavaScript (Viola-Jones-Lienhart et al Algorithm)
• HAARPHP image feature detection based on Haar Cascades in PHP (Viola-Jones-Lienhart et al Algorithm)
• FILTER.js video and image processing and computer vision Library in pure JavaScript (browser and nodejs)
• Xpresion a simple and flexible eXpression parser engine (with custom functions and variables support), based on GrammarTemplate, for PHP, JavaScript, Python
• Regex Analyzer/Composer Regular Expression Analyzer and Composer for PHP, JavaScript, Python
• GrammarTemplate grammar-based templating for PHP, JavaScript, Python
• codemirror-grammar transform a formal grammar in JSON format into a syntax-highlight parser for CodeMirror editor
• ace-grammar transform a formal grammar in JSON format into a syntax-highlight parser for ACE editor
• prism-grammar transform a formal grammar in JSON format into a syntax-highlighter for Prism code highlighter
• highlightjs-grammar transform a formal grammar in JSON format into a syntax-highlight mode for Highlight.js code highlighter
• syntaxhighlighter-grammar transform a formal grammar in JSON format to a highlight brush for SyntaxHighlighter code highlighter
• Fuzzion a library of fuzzy / approximate string metrics for PHP, JavaScript, Python
• Matchy a library of string matching algorithms for PHP, JavaScript, Python
• PatternMatchingAlgorithms library of Pattern Matching Algorithms in JavaScript using Matchy
• SortingAlgorithms library of Sorting Algorithms in JavaScript