选择图像的一部分并使用jQuery检索其坐标 [英] Select a portion of an image and retrieve its coordinates with jQuery

问题描述

我需要一种方法让用户通过调整透明矩形的大小或通过单击并拖动选择区域来选择图像的一部分（就像在桌面操作系统中完成的那样），两者都适合我。然后我需要使用jQuery检索所选区域的坐标。

I need a way for user to select the portion of an image either by resizing transparent rectangle or by clicking and dragging the selection area (as it's done in desktop OS), both would work for me. Then i need to retrieve the coordinates of the selected area with jQuery.

请推荐样本或tuts（如果有的话），方法或API文档部分可以提供帮助。

Please recommend samples or tuts (if there are any), methods or API documentations sections that could help.

推荐答案

请参阅 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>

这篇关于选择图像的一部分并使用jQuery检索其坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！