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:

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.

JavaScript Image Processing Library What Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more. For the full list, see the documentation page. If you have any comments, bug reports or other feedback, don't hesitate to leave a comment here or shoot me an email. You can follow the development of Pixastic as well as other JavaScript experiments on my blog. How Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects. Show me! If you want to see for yourself what Pixastic can do, you can check out the documentation where you will find small demos for all actions No, show me now! If that's not good enough, here's a quick and dirty demo of how to use Pixastic. Example code: Output (mouseover the image): Where Who

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.

Plupload: Multi-runtime File-Uploader