如何在 html 和 php 中捕获我上传的图像上的鼠标光标位置？

Question

我只想在我上传的图片上写文字。我只使用 html 和 php。 同样，我试图保存用户单击图像以编写文本的鼠标光标的位置。 我在下面尝试了这些东西。 它在我的 click.php 中显示错误。

1. index.php

   <form action="click.php" method="post" enctype="multipart/form-data">
       <h3>Select image to upload:<br/></h3>
       <input type="file" name="fileToUpload" id="fileToUpload" accept="image/*"/>
       <input type="submit" value="Upload Image" name="submit"/>
   </form>
   

2. 点击.php

       <script>
       function getPos(e){
           x=e.clientX;
           y=e.clientY;
           cursor="Your Mouse Position Is : " + x + " and " + y ;
           document.getElementById("displayArea").innerHTML=cursor
       }
   
       function stopTracking() {
           document.getElementById("displayArea").innerHTML="";
       }
       </script>
   
       <div id="focusArea" onmousemove="getPos(event)" onmouseout="stopTracking()">
       <?php
           $target_dir = "uploads/";
           $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
             //Set the Content Type
           header("Content-type: image/png");
             #dispaly the image
           $file = $_POST['file'];
           echo file_get_contents($file);
       ?>
       </div>
       <p id="displayArea"></p>
   

Answer 1

请试试这个

$(document).ready(function(e) {
    $('#A').click(function(e) {
        alert(e.pageX+ ' , ' + e.pageY);
    });    
});

DEMO