Selecte Rectangle Areas Of An Image - jQuery AreaSelectable

AreaSelectable is a small jQuery plugin which makes it possible to highlight & select rectangle areas of an image you provide.

Great for online image editing tool that allows the user to select parts of an image for further operations.

How to use it:

1. Embed an image into the page.

<img id="demo" src="example.jpg" width="600" height="450">

2. Load jQuery JavaScript library and the minified version of the jQuery AreaSelectable plugin at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="dist/areaSelectable.min.js"></script>

3. Call the function areaSelectable on the image and done.

$(function(){

  $("#example").areaSelectable();

});

4. Enable multiple selection on the image.

$("#example").areaSelectable({ 
  allowMultiple: true
});

5. Set the pre-selected area.

$("#example").areaSelectable({ 
  allowMultiple: true,
  x: 5,
  y: 5
});

6. Customize the styles of the selected areas.

$("#example").areaSelectable({ 
  areaClass: "area", 
  color: "#cd0000", // background color
  opacity: ".6"
});

7. More configuration options.

$("#example").areaSelectable({ 
  splitOperator: ",",
  width: "auto",
  height: "auto",
  createHidden: true,
  name: "", // input name
});

8. Callback functions available.

$("#example").areaSelectable({ 
  onAfterSelect: function(status, id) {},
  onBeforeSelect: function(status, id) {},
  onSelected: function(id) {},
  onDeselected: function(id) {}
});

9. Set the pre-selected area programmatically.

$("#example").areaSelectable('setSelected', [2, 3, 4]);

10. Get the selected area(s).

$("#example").areaSelectable('getSelected');

---

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