Online Image Editor
Crop, rotate, and resize with asp.net
Posted on 10/30/2007 2:52:52 PM in Asp.net

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

Online Image Editor

Crop

Online Image Editor - Crop

Rotate

Online Image Editor - Rotate

Rotate

Online Image Editor - Save

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.)
Feedback
Franklin Rau
Posted on 11/1/2007 8:50:12 AM

Very nice editor and it works great. Can't wait to see the next versions with more features!

Marcelo Franco
Posted on 11/5/2007 3:21:18 PM

Great!!! Thanks!

J Carmona
Posted on 11/5/2007 5:28:53 PM

Excellent work,

But I believe if the user can draw a rectangle on image to crop the portion of the image the tool would be better.

Felipe Quezada
Posted on 11/6/2007 9:28:17 AM

Excellent work, I really like it!

CLGan
Posted on 11/6/2007 11:32:52 PM

Thanks for your marvelous contribution

Martin Hansen
Posted on 11/28/2007 3:45:26 PM

Great tool, but looks like you have posted the demo js. See line 203 in image.js:
----
return; //Demo shouldn't save
----

People will probably find it, like me, but perhaps remove it anyway? ;)

Have you planned a aspect constraint on the crop/resize?

Joe
Posted on 11/30/2007 7:02:38 AM

Thanks for your work - it looks good - will def test it out, nice and simple -does what it says on the tin :)

JoeByrne
Posted on 12/1/2007 9:28:42 AM

noticed that in IE7 clicking the crop button was causing javascript errors - the height variable of the image didnt seem to have been assigned, i added the following to the body onload to help ensure the variables are saved,

//Runs whenever the page loads for the first time
function bodyload()
{
var theImage;
theImage=$('#i');
// Size of image shown in crop tool
crop_imageWidth = theImage.attr('width');
crop_imageHeight = theImage.attr('height');

// Size of original image
if (originalWidth == 0)
{
originalWidth = theImage.attr('width');
originalHeight = theImage.attr('height');
}
if (width!=0 || height!=0)
{
if (cropWidth == 0)
{
crop_originalImageWidth = originalWidth;
crop_originalImageHeight = originalHeight;
}
else
{
crop_originalImageWidth = cropWidth;
crop_originalImageHeight = cropHeight;
}
}
else
{
crop_originalImageWidth = theImage.attr('width');
crop_originalImageHeight = theImage.attr('height');
}
$('#dimensions').html(theImage.attr('width') + 'x' + theImage.attr('height'));
$('#imageContainer').css('width', theImage.attr('width'));
$('#ModalBackground').hide();
}

Angela
Posted on 3/11/2008 11:42:55 AM

Hello...
I found this extremely useful.. this has been something tht i had been searching for.. for quite sometime...

There is a challenge i faced... while saving a image tht has been edited.. if tht image (with the same name) already exists in the server... the edited image is not being saved...
but if we give a new file name then it is saved... Could you please let me know how this cld be done...

Richard A. Muscat
Posted on 3/17/2008 9:08:21 AM

Hi,

I've been trying to get this editor to work because it's really cool but I'm getting stumped with assembly stuff and so on.

What version of asp.net was it developed for?

James
Posted on 3/26/2008 5:18:57 PM

It was developed for asp.net 2.0

Aymiee
Posted on 5/21/2008 5:20:56 PM

Awesome tooool! testing it out now and it works nicely. Aspect ratio would be nice.. but it's a great tool!

Please post your comments:
Please add 2 and 3 and type the answer here:
Name:
Email (optional): Your email address will not be posted.
URL (optional):
Comments: