Dynamic image crop/rotate

What it does :

This component retrieves an image (specified in php file) from your server and lets you crop and rotate the image dynamically in your browser window, once you’re done it generates a preview (using JavaScript) and saves it to a new folder in jpg format (giving it a random name).

*Please note the demo is hosted on a free site therefore is a tad on the slow side.

Features :

• Fast and easy to use.
• Supports png, jpg and gif image formats.
• Small file size meaning faster loading times!
• Coded completely from scratch, meaning it’s not dependant on a JavaScript library and reduces the number of HTTP requests.
• Plays nicely with all JavaScript libraries.
• Takes advantage of up and coming technologies such as the canvas tag and css3
• Completely cross-browser… works in all modern browsers
• Verifies all data submitted to stop any hacking
• Has smooth animations
• Image preview adjusts to the browser’s window
• Has nice looking tooltips
• Doesn’t re-save image when reload/refresh button is pressed
• Minimum and maximum image dimensions can be set for an image to resize to upon saving (keeps aspect ratio)

Requirements :

Usage :

I could see this being used on a social webite or one that lets users upload images after being logged in. You could then retrieve these images from a mysql database and link them to this component to let the users crop/rotate their images. That being said it would also be handy for website admins who want to quickly and easily perform simple photo manipulation tasks.

List of possible updates (depending on feedback) :

Add features such as grayscale, mirror vertical/horizontal and hue/saturation/lightness in javascript preview and php.
Possibility for user to choose background color of saved image for transparent pngs/gifs (either black or white).
Dynamic rotation with javascript (any angle maybe).
Possibility to delete original image after crop.
Support for other image formats.
Add aspect ratio and keyboard functionality to crop view.
Fix a minor aesthetic abnormality – save/cancel buttons (IE).
Clean and optimize code more and improve extensibility for further updates.

I’m unsure about these updates so be sure to leave some comments and let me know what you think

Sorry but any updates have been temporarily put on hold while I work on a bigger, more time consuming project for codecanyon… hoohoo exciting !