ImageBooth Recap: Multilayered ImageEditor in pure Javascript

As I’ve been finishing features, I’ve just been updating what the new stuff is… but now that I have a working implementation of layers (though save isn’t yet linked to layers), I figure it’s time to stop and give an overall view of the ImageBooth Demo app and what it does.

When you open it up you see a vanilla image editor interface. What is important to note, is there is an internal compositing framework outputting to 1 canvas in the end, with ImageBooth using many canvases internally for layer and render buffers. Also, the 4 main interfaces(Brushes, Tools, Filters and Operations) are all pluggable, so it’s simple to contribute.

The currently available plugins are:

Tools

1. Paintbrush – paint the foreground color onto the selected layer
2. Eraser – paint the background color onto the selected layer
3. Clone – clone pixels relative to the clone source using the current brush
4. Paintbucket – flood fill a color into an image at a certain pixel with a given threshold and opacity
5. Eyedropper – sample a color from the current layer

Operations

1. Negative – invert the color values of the image
2. Brightness/Contrast

Filters

1. Gaussian Blur – Blur the image
2. Sobel Edge Detector
3. Laplacian Gradient Detector
4. Sharpen
5. Emboss
6. High Pass Filter

Brushes

1. 1×1
2. 3×3 Round
3. 5×5 Square
4. 5×5 Round
5. 5×5 Soft Round
6. 10×10 Scattered
7. 10×10 Soft Round

So while it’s definitely got a lot of rough edges, it’s really becoming more practically useful all the time. That is, unless you use IE…

So go to the ImageBooth Beta, grab an account, and play around with it.