Asido - Browse Files. AjaxCrop – Jquery and PHP Crop tool. PHP & jQuery image upload and crop. PHP & jQuery image upload and crop v1.1 We are looking for new features to be added to this plugin, please leave your requests in the comments on the following page : JQuery / PHP Upload and Crop – Feature Request Due to popular demand, further updates have been made to this script, to allow upload of JPG, GIFs and PNG images!
Same great functionality now even more useful. Please note the old script is still available at PHP & jQuery image upload and crop. If you are not familiar with the concept, it may be worth reading the old article first. You can now upload different types of images, JPG, GIFs and PNGYou can now upload images and have a random file name (this fixes the caching issue some of you have had)The image upload error check has been fixed (thanks to DevWooty) As with the previous script, ensure you have the following: PHP 4 or Higher (It has been tested on Version 5)PHP GD LibraryjQuery ver 1.2.3 or HigherImage Area Select plugin by Michal Wojciechowski 1. 2. 3. 4. Odyniec/imgareaselect.
Using imgAreaSelect and GD library to crop and create thumbnails. I have recently been using a jQuery plugin called imgAreaSelect, which allows you to crop images. I wanted to use it with my PHP site so that thumbnails could be cropped and created. GD Library is a PHP library that allows manipulation of images, in particular it can create new images. It may need to be installed on some servers, but I found it already installed on my host and on MAMP (my local server). Combining this with imgAreaSelect and we can feed the coordinates that are cropped to create the new thumbnail. So here’s how Firstly, attach all the jQuery and plugin scripts in the head tags: Now still in the head tags, the plugin needs to be called, here I am pointing it to an image with an id of ‘crop’.
The other thing I have done here is called a function named ‘preview’ onInit (on initialisation, when the plugin is first loaded) and onSelectChange (whenever the crop area is changed). If doing this preview function, you need to give it the width and height of the original image. jQuery Plugin - imgAreaSelect. ImgAreaSelect - jQuery plugin. ImgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr). Plugin features: Highly configurable Customizable with CSS styling Handles scaled images Keyboard support for moving and resizing the selection Supports callback functions Provides API functions for easier integration with other application components Lightweight — the packed version is just 8KB The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.
Live Example Click and drag on the image to select an area. Selection Preview » See more examples Quick Usage Instructions Download the plugin, unzip it, and copy the JavaScript and CSS files to your website/application directory. <head> ... Then, to enable selection on an image, wrap it in a jQuery object and call the imgAreaSelect() method: