Select a portion of an image and retrieve its coordinates with jQuery

前端未结

关注

 2  735

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)

相关标签:

2条回答

予麋鹿

2021-01-04 13:01

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>

0 讨论(0)

自闭症患者

2021-01-04 13:01

<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.stack.imgur.com/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>

0 讨论(0)