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

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

本文关键字：jQuery 检索 坐标 图像 一部分 选择      更新时间：2023-09-26

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

请推荐可能有帮助的样本或教程（如果有的话）、方法或API文档部分。

请参阅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>


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

相关文章：