graphic -- image filters, conversions, edge detection

A mini image editor without any image file: the source picture is drawn with the 2D canvas API, then the graphic module (loaded on demand by ApplicationBuilder) works on its ImageData. Click a filter button to render it on the output canvas, move the strength slider to re-apply it with another parameter, tick Stack to chain filters, run edge detection, or convert the output to a PNG blob and back.

Source (drawn with the 2D canvas API)

drawing...

Output (ImageData returned by the module)

click a filter below

Filters (graphic.filters) Strength pick a filter first Stack: apply the next filter to the current output instead of the source

Edge detection (graphic.recognition)

The picture is first converted to grayscale with filters.saturation(imageData, 0), then recognition.edgeDetection(imageData, threshold) returns [x, y] points that are plotted on the output canvas. The slider above sets the threshold (0-100).

Convert (graphic.convert)

convert.imageDataToBlob() turns the output ImageData into a PNG blob (shown in the <img>), then convert.blobToImagedata(blob, cb, 120, 120) loads it back as a resized ImageData drawn on the small canvas.

Log