Pixpipe.js is an attempt to build an image processing pipeline entirely in native Javascript for browsers. Its architecture is somewhat inspired by ITK, making a clear distinction between objects that contain data and objects that process data.

The motivation at the origin of the project is mainly to bring image processing to every web-browser so that interactive tools do not have to reinvent the wheel when they need such pipeline.

The concept of pipeline implies that the output of a Filter can be used as an input for the next one, like in ITK. In Pixpipe.js, this is done by using the Filter's methods addInput() and getOuput(). Some filters may have several inputs, several outputs and possibly of different kinds.

Pixpipe is being developed at the Montreal Neurological Institute (MNI/Neuro), in the lab McGill Center for Integrative Neuroscience (MCIN), thus, it puts the emphasis on playing well with data from research in neuroscience.

Install Pixpipe

Like most Javascript projects, installing Pipipe is quite easy:

# in a npm Javascript project
$ npm install pixpipe

Once added to your project, you can import to the source:

// From a Javascript source
import pixpipe from 'pixpipejs';

and use the pixpipe module to address all the classes and objects, just like in var myImage = new pixpipe.Image2D();


Pixpipe provides some tools and structures to create, open, process and save objects from different types:

  • images, such as jpeg, png, tiff (8/16bits), using Image2D objects
  • volumes, such as NIfTI, Minc2 and MGH, using Image3D objects
  • mono-dimensional signals, such as EDF files using Signal1D objects
  • Meshes surface files such as MNI OBJ and soon Wavefront Obj, using Mesh3D objects

One of the key features of these containers is that they are made for precise scientific computation, thus, they are using float32 instead of uint8 and can be composed of as many bands as required (and not only 3, like in the classic RGB).

In addition to containing data, every Pixpipe type can contain an infinite amount of metadata from various types

Along these containers, some filters are available in order to process these data. Filters can cover very broad usage, from performing a simple threshold to applying a low pass filter in Fourier domain.
Pixpipe is still a young project and most of the time, a new filter is created when it is necessary, so don't expect to have an OpenCV kind of diversity. But good news: adding a new filter is quite easy and pull requests are welcome. (cf. contribution guide)

Finally, a data serializer is provided, so that you can save your data on your own storage, as a file. This uses the PixBin format, developed especially for the needs Pixpipe. It can save any object of the Pixpipe types with both data and metadata (+ optional lossless compression). Later when reading a PixBin file, you will find all your objects the way you left them.


The point of Pixpipe is to be easy to use and easy to contribute to. This goal leads to take some decisions:

  • using a source bundler (Rollup)
  • properly define a folder hierarchy within src:
    • core for the most low level interfaces and classes
    • decoder for specific file decoding and encoding
    • filter for all the filters (this could be arranged in a better way)
    • helper are like filters but the processing they provide is to help visualize data, rather that applying a scientifically relevant treatment. (ie. apply a colormap)
    • io for downloading/reading/writing files from the filesystem or AJAX
    • utils for hosting utility classes, mostly static
    • pixpipe.js the main entry point where are listed all the modules
  • A modular approach and a clear separation of objects.
  • Once built, Pixpipe is only a single file, located in dist, so that's it's easy to import

Here are some slides to present the project. They were done only a few months after having started but most of it is still relevant.


Some modules were developed for Pixpipe but can also be used independently, you can find them on the Github organization. For example, the PixBin serialization format in-depth description can be found here.