Phantasoft's Image Editor


I coded and developed a complete emebeddable image editor for "Phantasoft S.R.L" to be integrated in many of their applications.

Role: Lead Front-End developer.


Phantasoft’s Image Editor

The app is embeddedable image manipulation editor made in HTML5 The architecture consist in a tabbed sidebar that hold different options in work with an image previewer for image manipulation and retrieval.

The following describe how each tabs works along with the previewer.

Camera:

In this pane the user can take and discard a picture taken with the user web camera.

Camera pane


Source:

In this pane there are options to load image from disk or the web:

On the drop-zone box, users can drag and drop an image via a web page or disk. Also, paste valid image URL on to be loaded on the previewer is also supported.

Another alternative to load an image from the disk is to click the button bellow the drop-zone to open the user’s file manager and set the image from there.

Source pane


On the top right corner there is an input which can serve as an interface to set image from the web. The feature use Google as its search engine. After keywords are set, a list of images

Will appear, these thumbnails can be clicked to be previewed on the previewer and select for set.

Google search pane


Crop:

A cropping box will appear on the previewer. The inside of the box determine the portion of the image that will remain after cropped. This tool can be resided and adjusted at will. The sliders list below the buttons, beside showing the current coordinate of the crop-box, size and aspect ratio, they also can modify it.

Crop pane


Settings:

The image can be rotated and flipped on the Y axis using the options that appear on the pane. The sliders below the buttons will preview each filters given their value.

Settings pane


Filters:

This pane comes with preset filters for application.

alt text


History:

The app support history undo through a listed interface in which user can jump to a past state.

alt text


Done with manipulation, the user can use the options on the bottom of window to download the resulting image.