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.

Motivations

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.

Cookbook

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.

Documentation

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
  "dataType":"Float32Array",

  // 1D array of data
  "data":[
    255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255,255,128,64,255
  ],

  // metadata
  "metadata":{
    "ncpp":4,
    "width":10,
    "height":5
  },

  // Original Pixpipe type
  "pixpipeType":"Image2D"
}

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).

Todo

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)~~

License

MIT - See LICENSE file.

vtpp2014 / pixpipejs