jQuery Plugin For Selecting Multiple Areas of An Image - Select Areas

Select Areas is a jQuery plugin that allows the visitor to select multiple rectangular areas of an image for further use (e.g. image mapping, image cropping, etc).

Features:

• Allows to add, delete, move, resize the selections.
• Keeps aspect ratio for the selection.
• Keyboard support for moving the selection.
• Callback events.
• Lots of API functions.
• Highly configurable.
• Cross browser and easy to use.

Basic usage:

1. Add the jQuery library together with the jquery.selectareas.js and jquery.selectareas.css to your html page.

<link href="jquery.selectareas.css" rel="stylesheet">
<!--[if lte IE 8]>
  <link href="jquery.selectareas.ie8.css" rel="stylesheet"> 
<![endif]-->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.selectareas.js"></script>

2. Call the function on the image.

$('img').selectAreas({
  // options here
});

3. Configuration options. Here is a full list of adefault options that you can overwrite as you like

// editable
allowEdit: true,

// moveable
allowMove: true,

// resizable
allowResize: true,

// selectable
allowSelect: true,

// deletable
allowDelete: true,

// allows keyboard arrows for moving the selection
allowNudge: true,

// keeps a specified aspect ration
aspectRatio: 0,

// minimum size of a selection
minSize: [0, 0],

// maximum size of a selection
maxSize: [0, 0],

// scale the image to this width
width: 0,

// maximum number of area that can be drawn
maxAreas: 0,

// opacity of the moving dotted outline around a selection
outlineOpacity: 0.5,

// opacity of the overlay layer over the image
overlayOpacity: 0.5,

// list of areas to add to the image from the beginning
areas: [],

// callbacks
onChanging: null,
onChanged: null

4. Public methods.

// destroy the plugin
.selectAreas('destroy');

// reset the plugin
.selectAreas('reset');

// returns an array of areas
.selectAreas('areas');

// add an area
.selectAreas('add', OPTIONS);

// remove an area
.selectAreas('remove', ID);

// unfocus all the areas
.selectAreas('blurAll');

// returns an array of areas, with their size and coordinates on the original image 
.selectAreas('relativeAreas');

// return true or false whether or not a point ({x: X, y: Y}) is included in at least one area
.selectAreas('contains', POINT);

Change log:

2016-12-26

• Fixed coding style ' -> "

---

This awesome jQuery plugin is developed by 360Learning. For more Advanced Usages, please check the demo page or visit the official website.