Wybierz część obrazu i pobierz jego współrzędne za pomocą jQuery

Question

Potrzebuję sposobu, aby użytkownik wybrał część obrazu poprzez użycie recizing transparent rectangle lub kliknięcie i przeciągnięcie obszaru zaznaczenia (jak to jest zrobione w desctop OS), oba będą dla mnie działać. Następnie muszę pobrać współrzędne wybranego obszaru za pomocą jQuery.

Proszę polecić próbki lub ślady (jeśli takie istnieją), metody lub dokumentacje API, które mogą pomóc. Dzięki!

Answer 1

Zobacz Jcrop i jego dema.

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

i skrypt:

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