イメージの一部を選択してjQueryで座標を取得します

Question

透明な矩形を表示するか、選択領域をクリックしてドラッグするか（desctop OSのように）、イメージの一部を選択する方法が必要です。どちらも私のために働くだろう。次に、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>