отслеживание местоположения мыши на загруженном изображении с использованием HTML и JavaScript

Question

отслеживание местоположения мыши на загруженном изображении с использованием HTML и 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>

0

html image javascript mouseover php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Заголовки не могут быть установлены после чего-либо, они должны быть первыми строками любого вывода.

Эта строка:

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

Не принадлежит там. Включите ошибки следующим образом:

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

И вы получите ошибку, сообщающую, что заголовки не могут быть установлены.

0