Submit your widget
HomeImage EffectsjQuery plugin for selecting area of an image

jQuery plugin for selecting area of an image

Created 14 years ago   Views 11731   downloads 2084    Author odyniec
jQuery plugin for selecting area of an image
View DemoDownload
96
Share |

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

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 less than 8KB

The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

Quick Usage Instructions

Download the plugin, unzip it, and copy the JavaScript and CSS files to your website/application directory. Load the files in the <head> section of your HTML document.

<head>
 ... <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /> 
 <script type="text/javascript" src="scripts/jquery.min.js"></script> 
 <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
  ... </head>

 

 

Then, to enable selection on an image, wrap it in a jQuery object and call the imgAreaSelect() method:

 

<script type="text/javascript">
 $(document).ready(function () {
  $('img#photo').imgAreaSelect({
   handles: true,
    onSelectEnd: someFunction
  });
   });
 </script>

 

» Read documentation

 

You might also like