vtpp2014 / pixpipejs

A image processing pipeline in javascript for 2D and 3D dataset (work in progress)

Home Page:http://me.jonathanlurie.fr/pixpipejs/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


Pixpipe.js is an attempt of building an image processing pipeline entirely in native Javascript for browsers. Its architecture was somewhat inspired by ITK, making a clear distinction between objects that contains data (inherit from PixpipeContainer) from object that processes data (inherit from Filter).

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 Filter may have several input or output of different kinds.


To make image processing:

  • accessible, using just a web browser and a textpad
  • easy to use in a sense that "all filters work the same way".
  • with no other dependency than pixpipe.js
  • with no required compilation or system fuss
  • modular
  • generic enough to use different kind of data/datasource
  • easy to contribute
  • well documented for both users and contributors.


The best way to learn how to uses Pixpipe is by going through the cookbook (there is also the web version). You'll find in-depth descriptions of the core components, examples and how-to's.


This documentation is autogenerated from source comments and thus is prety complete. Interested in how to generate your own? go there.

Compatible formats

Here is the list of compatible formats:

  • jpeg (to Image2D)
  • png (to Image2D)
  • tiff (to Image2D)
  • NIfTI (to Image3D / MniVolume)
  • Minc2 (to Image3D / MniVolume)
  • Pixp (generic Pixpipe format for both Image2D and Image3D )

The Pixp format

For saving intermediate or final results to a local storage, Pixpipe needs a file format. I wanted something generic enough to works with Image3D, Image2D and possible future formats without having to deal without having to deal with this or that specificity of this or that container. In other words, one single save() method and one single open() method, no matter the kind of data. This is possible thanks to the common features of Image2D and Image3D (they both inherit from PixpipeContainer). The format I've chosen for quite naive but very versatile: JSON, compressed with gzip (using Pako) The extension is *.pixp, here is the format description:

// this is a 2D image
  // TypedArray type

  // 1D array of data

  // metadata

  // Original Pixpipe type
  • TypedArray type can be any typed array from here https://mzl.la/2nASpcK
  • 1D array of data in case of rgba image, the data are ordered rgbargbargba...
  • metadata are usually different from Image2D and Image3D but always carry dimensionality and the number of components per pixel
  • Original Pixpipe type to be able to reconstruct the original object

Note: JSON serialization does not play well with TypedArrays and interpret them as Object when parsing back, this is why we need to keep a track of the TypedArray type and need to convert the data into a regular Array (and not TypedArray).


  • Export Image2D as png (and trigger a download)
  • Doc and tutorials for developers
  • Integrate wokers with Rollup
  • 2D FFT
  • Bilinear and trilinear interpolation + resampling filter
  • Oblique sampling for Image3D
  • Better test time series with NIfTI (maybe add an example)
  • crop an Image2D or Image3D
  • Add a checksum for file loading so that we can recognize them for sure
  • Add an example like volume3DNavigator but with autoload
  • Texture 16bit for volume3DNavigator
  • Better manage voxel access in Image3D
  • Build an Image3D from a list of Image2D
  • Add an efficient way to minify the code
  • Add a generic Image3D decoder so that a user does not have to care about format
  • Load a file as a ArrayBuffer with a AJAX
  • Export Image2D, Image3D or generic *.pixp file (using serialization and Pako)
  • Load a file as a ArrayBuffer with a file dialog DONE: FileToArrayBufferReader
  • Readers for Minc and NIfTI DONE: Minc2Decoder and NiftiDecoder
  • Image3D
  • Replace ncpp attribute by a metadata (Image2D & Image3D)
  • Push some methods of MniVolume to Image3D
  • export a/multiple Image2D of sliced Image3D (upon 2D size limit) with mosaic (for shader texturing)


MIT - See LICENSE file.

ezoic increase your site revenue


A image processing pipeline in javascript for 2D and 3D dataset (work in progress)


License:MIT License


Language:JavaScript 100.0%