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

File Size: 490 KB
Views Total: 30681
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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).


  • 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"> 
<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.

  // 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

// reset the plugin

// returns an array of areas

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

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

// unfocus all the areas

// returns an array of areas, with their size and coordinates on the original image 

// 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:


  • 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.