Introduction
This is an online image editor which allows quick editing of images already uploaded to a server running asp.net. It currently supports:
- Editing bmp, gif, jpg, and png images.
- Rotate 90 degrees.
- Crop
- Resize
- Undo/Redo
- Save
Demo
Code
Screen Shots

Crop

Rotate

Rotate

Background
This project started a few months ago when I wanted an easy way to resize and rotate photos after they have been uploaded to the CMS. I went out looking for a prebuilt solution. Unfortunately everything I could find was either a hosted editor, written for php, or was not open source, so I set out to write my own. I kept it simple and made sure it would easily work with the CMS file manager.
Using the editor
To use the image editor you simply need to pass the relative path of the image being edited in the query string parameter file to ImageEditor.aspx. So if we were to edit the image landscape.jpg we would simply send the user to ImageEditor.aspx?file=images/landscape.jpg
Design
The design and architecture of this project is very simple. I used JavaScript(AJax) for the user interface, C# for the image editing, and html/css for the display. It consists of a few basic components:
ImageEditor.aspx
This page reads the query string parameter file and sets up the html.
Image.js
All of the user interface logic is implemented through JavaScript. I used JQuery to expedite development time and simplify the code. Each time a new action takes place it builds a new Uri with the proper query string parameters for processImage.ashx and updates the image source.
processImage.ashx
This page contains all the code for editing the image. The original image path and all changes are passed through query string parameters and processImage.ashx returns the new image. It can also be passed a save parameter indicating the path where it should be saved.
This design removed any need for scratch files as all editing is done in memory and served the browser without being saved. Although simplifying the design I don’t know how it well it will work as server load increases. For my use in CMS with only a few editors it does very well, but if places on a public website it may cause too much processing.
Still to-do
- Add support for changing the image format.
- Add other commands (i.e. red eye reduction, grayscale, watermarking, etc.)