Выберите часть изображения и получите его координаты с помощью jQuery.

Question

Мне нужен способ, чтобы пользователь мог выбрать часть изображения, либо изменив размер прозрачного прямоугольника, либо щелкнув и перетащив область выделения (как это делается в настольной ОС), и то и другое будет работать для меня.Затем мне нужно получить координаты выбранной области с помощью jQuery.

Пожалуйста, порекомендуйте образцы или отрезки (если таковые имеются), методы или разделы документации API, которые могут помочь.

Answer 1

См. Jcrop и его демонстрации.

<!-- This is the image we're attaching Jcrop to -->
<img src="demo_files/pool.jpg" id="target" alt="Flowers" />

И сценарий:

<script type="text/javascript">

jQuery(function($){

  $('#target').Jcrop({
    onChange:   showCoords,
    onSelect:   showCoords
  });

});

// Simple event handler, called from onChange and onSelect
// event handlers to show an alert, as per the Jcrop 
// invocation above

function showCoords(c)
{
  alert('x='+ c.x +' y='+ c.y +' x2='+ c.x2 +' y2='+ c.y2)
  alert('w='+c.w +' h='+ c.h)
};

</script>