Login/Register
Select a portion of an image and retrieve its coordinates with jQuery
Asked Answered
Solved javascriptjqueryimagecoordinates
D

2

14

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.

Decor answered 22/3, 2012 at 12:32 Comment(1)
jCrop do something similar so you might check that code github.com/tapmodo/Jcrop/blob/master/js/jquery.Jcrop.js – Liquate
C
20

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>
Crystallo answered 22/3, 2012 at 12:39 Comment(3)
deepliquid.com/projects/Jcrop/demos.php?demo=handler This is exatly what i needed, thanks! – Decor
can we use these coords for <area> ? – Heyman
Can we select area with pen tool – Achaean
B
3

<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>
Berkowitz answered 23/7, 2020 at 9:38 Comment(1)
Nice one, I have been searching fro something like this for long. Thank you! – Messeigneurs

© 2022 - 2024 — McMap. All rights reserved.