鼠标位置跟踪上载的图像使用HTML和javascript


mouse location tracking on uploaded image using html and javascript

我已经编写了跟踪鼠标位置的代码,但我的代码只适用于字符串,而不适用于我上传的图像。它正在生成图像图标,而不是图像。

    <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/*"/>

click.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>
    </head>
    <body>
    <div id="focusArea" onmousemove="getPos(event)" onclick="merge" onmouseout="stopTracking()">
            <?php 
            $target_dir = "uploads/";
            $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
            $uploadOk = 1;
            $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
            // Check if image file is a actual image or fake image
            if (isset($_POST["submit"])) {
                $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
                if ($check !== false) {
                    move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
                    $uploadOk = 1;
                } else {
                    $uploadOk = 0;
                }
             }
             header("Content-type: image/png");
             imagepng($target_file);
             imagedestroy($target_file);
         ?>
         </div>
         <p id="displayArea"></p>

标题不能设置在任何内容之后,它们必须位于任何输出的第一行。

这条线

:

header("Content-type: image/png");

不属于这里。启用如下错误:

ini_set('display_errors', 1);
ini_set('error_reporting', E_ALL);

你会得到一个错误,告诉你头不能设置