Seleccione una parte de una imagen y recupere sus coordenadas con jQuery

Question

Necesito una forma para que el usuario seleccione la parte de una imagen recirculando un rectángulo transparente o haciendo clic y arrastrando el área de selección (como se hace en el sistema operativo Desctop). ambos funcionarían para mí. Entonces necesito recuperar las coordenadas del área seleccionada con jQuery.

Por favor, recomiende muestras o tuts (si hay alguno), métodos o secciones de documentaciones API que podrían ayudar. ¡Gracias!

Answer 1

Vea Jcrop y sus demostraciones.

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

Y el guión:

<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>