选择图像的一部分并使用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>