Image Processor

Image Processor

This app implements a client side image processor using HTML canvas for the various filters and transformations.

• You need one or more `Source` nodes to start. Either drag a source node onto the canvas, then use the uploader on it, or drag an image into it, or just drag an image onto the canvas
• Drag on filters/transformations as you need, and drag edges to connect them. Only matching datatypes can be connected (you cannot, for instance, connect an `amount` from a number output to an `image` on a display node).
• Filters and transformations can have values injected into them, which may be the result of some other computation or of the properties of some image, but you can also set values directly on filters and transformations. Where you have values set but also injected, the injected values take precedence.
• Drag on a `Display` node to view the output of some chain.
• You can download images directly from a `Display` node.

We'll be posting a detailed description of how this demo works at some stage soon.

The code snippets in this post are available in an MIT licensed library available on Github at https://github.com/jsplumb/canvas-image-processing and as a package on NPM.

You can read more about image processing on our site here