Online Image Editor and Photo Collage Maker

Last updated on April 11, 2017 in Design

Online Image Editor

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: