CODEWITHSUNDEEP
javascriptjqueryimagecoordinates
Nikolay
Nikolay

Reputation: 2214

Select a portion of an image and retrieve its coordinates with 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.

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

Upvotes: 14

Views: 31309

Answers (2)

Vipul Gupta
Vipul Gupta

Reputation: 491

<html>
    <head>
        <title>Image Processs</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
        </head>
    <body>
        <img src="https://i.sstatic.net/UYYqo.jpg" alt="" id="image">
        <script>
            $(document).ready(function(){
                $('#image').Jcrop({
                    onSelect: function(c){
                        console.log(c);

                        console.log(c.x);
                        console.log(c.y);
                        console.log(c.w);
                        console.log(c.h);
                    }
                })
            })
        </script>
    </body>    
    </html>

Upvotes: 3

Mariusz Jamro
Mariusz Jamro

Reputation: 31683

See Jcrop and it's demos.

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

And the script:

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

Upvotes: 20

Related Questions