Изучаем jQuery. jCrop

Поскольку мы рассматриваем стабильные и качественные подключаемые модули и лайтбокс-эффекты, неверно будет не затронуть модуль Jcrop, который позволяет определять края изображений. Данный модуль добавляет оверлей в стиле лайтбокса на изображение и дает возможность пользователю манипулировать размерами накладываемого прямоугольника с целью выбора нужной области изображения.

Из книги "Изучаем jQuery. 2-е изд.", стр.114

https://github.com/tapmodo/Jcrop
http://deepliquid.com/content/Jcrop.html

Размер выделенной области :
x

$(document).ready(function(){

  var jcrop = $.Jcrop('#jcrop_target',{
      setSelect: [70,200,300,290],
      minSize:[20,20],
      onChange: showPreview,
      onSelect: showPreview,
      aspectRatio: 1
  });

  function showPreview(coords)
  {
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;

    $('#preview').css({
      width: Math.round(rx * 400) + 'px',
      height: Math.round(ry * 462) + 'px',
      marginLeft: '-' + Math.round(rx * coords.x) + 'px',
      marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });

    $('#w').val(coords.w);
    $('#h').val(coords.h);
  };
  
});

Поскольку подключаемый модуль Jcrop располагает широким массивом доступных для применения параметров и методов, настоятельно рекомендуем вам ознакомиться с демонстрационными образцами, входящими в состав загруженного архива этого модуля, которые могут оказаться полезными для вас.

Из книги "Изучаем jQuery. 2-е изд.", стр.117