Online Image Editor and Photo Collage Maker
CanvasEdit – the HTML5 Photo Editor and Collage Creator
Recently, a few image editors have been created with HTML5 and Canvas. Today, I decided to build by own Photo Editor by using UI Kit for layout, FabricJS for Canvas manipulation, Color Thief for retrieving a color palette from an image, Spectrum for a color picker and other libraries like Say Cheese for integrating pictures from a webcam and noUiSlider for a nice range slider. Since I have previously covered building Instagram photo filters with HTML5, these are also included in the image editor.
It’s really more of a collage maker as you start with a canvas where you can drop and edit all kinds of objects, from all kinds of images, including webcam capture, to text, SVG shapes, and custom SVG code/files. You can even draw your own objects into the canvas and the visual editor gives you control over different drawing modes, colors, and sizes. Elements can be cleared, cloned, moved around, as well as resized and moved forwards and backwards, or on top/below other elements. You control the width and height and color of the background canvas and can set it to responsive mode, resize it to a selected object, or resize the object to the dimensions of the canvas.
Text can be added anywhere in your picture, dragged around, and you can change fonts and text styles. Images can be enhanced with predefined filters as well as specific changes to opacity, brightness, contrast, exposure, pixelation, noise, color tints, and even custom convolution matrix. Selecting a picture on the canvas calculates and shows the dominant color and color palette of the image pixels. Finally, there is history tracking with undo and redo functionality, mousewheel zoom and image cropping/clipping, and saving the entire design into png or jpeg formats.
Here is CanvasEdit, the HTML5 Photo Editor and Collage Creator
At some point, I might get around to these enhancements:
- Resize background canvas with mouse
- Allow pasting text in addition to images
- Add keyboard shortcuts like “ctrl-z” to actions like undo
- More optimization around cropping
- Load SVG from url and load external images via proxy
Pablo – quickly design images with text
HTML5 Canvas – Collage
Canvas wrap tutorial
canvasText – text on canvas
The HTML5 Canvas Text API
Canvas Text Demo
Stratiscape – HTML5 Canvas with multiple layers
Pixlr Image Editor
HTML Canvas Studio
HTML5 Slides Creator
Animatron – HTML5 Online Animation Editor