jQuery image upload and crop script with preview and resizing
image upload and crop also for mobile devices:
I needed a clean version of an AJAX image upload with crop function and I found a good jQuery-script called "imgAreaSelect".
Based on this script I found two really good projects:
The second one is the better one, I mean, because you can set a canvas size for the uploaded image and every image will fit to this canvas by the script and the aspect ration of the uploaded image doesn't matter.
The image processing is now based on the WideImage Project (http://wideimage.sourceforge.net/) instead of Asido and the crop function for the image is based on the jQuery "imgAreaSelect" script. WideImage is easier to handle and compatible with PHP 5.4.
For my projects I needed an updated version of the upload script and the jQuery scripts because there were no update since the last years.
(At first I made some changes in the PHP Asido-classes and the functions with usage of Asido, because with PHP 5.4 you had a lot of error output. Now you can use the script with PHP 5.3 and 5.4 without getting errors while uploading an image.)
With WideImage there are no problems with PHP 5.4 and I hope it will run with PHP 5.5 too.
After that I changed the doctype of the project to HTML5 and used the newest version of jQuery (1.8.2) and the newest version of jQuery imageAreaSelect (0.9.8). For a better usage of the uploading functions I changed the uploading script to work with jQuery 1.8.2, made the code more compact and now you can change all the used variables on the top of the script. The uploading of an image is automatically started if you have selected an image.
For the PHP-files and the uploading and resizing functions I made a configuration file, where you can change all variables like upload-folder or error-messages.
I added also a detection to identify portrait images and if a portrait image is detected, the image will automatically rotate.
The HTML-code and the CSS for the project were completely rewritten by me and now you will find a lot of comments in it. For example I styled the file-input field completely like a button (for IE6+) and changed the preview of the selection.
At the end I wanted to make the image-cropping to work on mobile (touch) devices. Since Apple iOS 6 it is possible to upload images in the browser and I think the imagecropping is also interesting for mobile devices. To make the imageAreaSelect to work on touch devices, I think its the better way to control the selection with buttons and not with the finger (a small selection is very hard to control with the finger). Because of that I added six buttons: move top, right, bottom or left and make the selection bigger or smaller. So it is easy to control the selection with mobile devices and tablets. The JavaScript file and the buttons for the mobile control you will only see, if you're using a tablet or mobile device to browse the upload script, for this condition I used the Mobile_Detect class from github (https://github.com/serbanghita/Mobile-Detect) which is often updated and knows many devices.
So now there is an actual script for uploading and crop images with PHP and jQuery which also works on mobile and touch devices. So feel free to leave a comment or write me webmaster@ephespage.de.
Thanks a lot to Keith Levi Lumanog and his script which my new one is based on.
Update from 12.04.2014
- changed image library to WideImage instead of Asido
- now completely compatible with PHP 5.4
- upload folders are now included
- added a fix for rotating images with WideImage
- download the script from Github and run!