Question

我需要一种方法让用户通过调整透明矩形的大小或通过单击并拖动选择区域（就像在桌面操作系统中完成的那样）来选择图像的一部分，这两种方法都适用于我。然后我需要用jQuery检索所选区域的坐标。

请推荐可提供帮助的样本或图片（如有），方法或API文档部分。

Answer 1

请参阅Jcrop，这是演示。

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

脚本：

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

Answer 2

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

选择图像的一部分并使用jQuery检索其坐标

2 个答案: