Crop Multiple Parts Of An Image - jQuery areaSelect.js

areaSelect.js is a small jQuery image crop plugin that allows you to select multiple areas of an image and crop them simultaneously. With live preview support and the ability to output it as JSON for save as purposes.

How to use it:

1. Load the jquery.areaSelect.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.areaSelect.js"></script>

2. Initialize the plugin on an image embbeded in the document.

<img src="example.jpg" alt="Image Alt" />

$('img').on('load',function () {
  $(this).areaSelect({
    // options here
  });
});

3. Specify the pre-selected areas.

$('img').on('load',function () {
  $(this).areaSelect({
    initAreas: [
      {"x": 280, "y": 93, "width": 50, "height": 50},
      {"x": 309, "y": 195, "width": 183, "height": 386},
      {"x": 298, "y": 5, "width": 45, "height": 55}
    ]
  });
});

4. Display the cropped images on the page.

<div id="preview">
</div>

function showPreview(areas) {
  var $preview = $('#preview');
  $preview.empty();
  for (var index in areas) {
    var area = areas[index];
    var $img = $('<div/>').css({
      'height': area.height,
      'display': 'inline-block',
      'width': area.width,
      'margin': '10px',
      'background-image': 'url("example.jpg")',
      'background-position': -area.x + 'px ' + (-area.y + 'px')
    });
    $preview.append($img);
  }
}
showPreview($('img').areaSelect('get'));
$('img').areaSelect('bindChangeEvent', function (event, data) {
  showPreview(data.areas);
});

5. Get the data of the selected area.

JSON.stringify($('img').areaSelect('get'))

6. Customize the styles of the selection box.

$('img').on('load',function () {
  $(this).areaSelect({
    padding: 3,
    area: {strokeStyle: 'red', lineWidth: 2},
    point: {size: 3, fillStyle: 'black'}
  });
});

7. Customize the event that allows you to remove the curren selection. Default: 'click'.

$('img').on('load',function () {
  $(this).areaSelect({
    deleteMethod: 'doubleClick',
  });
});

---

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