| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Record Mouse Coordinates</title>
|
| <style>
|
| .required { color: red; }
|
| .hidden { display: none; }
|
| #output_file { border: 1px solid #000; }
|
| .button { width: 90px; margin: 5px; }
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <h2>Input record XY mouse coordinates on an uploaded image:</h2>
|
| <form id="inputForm" method="post" enctype="multipart/form-data">
|
| <table>
|
| <tr>
|
| <td>Upload image <span class="required">*</span>:<br />Max 500 KB.</td>
|
| <td><input type="file" name="inputfile" id="inputfile" size="45" required /></td>
|
| </tr>
|
| <tr>
|
| <td>Please enter the Access Code as displayed below <span class="required">*</span>:</td>
|
| <td><img src="https://www.mobilefish.com/php/secureimage/createimage.php" alt="Access code" /></td>
|
| <td><input type="text" name="accesscode" id="accesscode" size="7" maxlength="3" required /></td>
|
| </tr>
|
| <tr>
|
| <td colspan="2"><span class="required">* = required</span></td>
|
| <td><input type="submit" value="Upload image" /></td>
|
| </tr>
|
| <tr>
|
| <td>Mouse coordinate:</td>
|
| <td>
|
| X-coord: <input name="cssxXval" id="cssxXval" value="0" size="7" maxlength="4" readonly /> px
|
| Y-coord: <input name="cssxYval" id="cssxYval" value="0" size="7" maxlength="4" readonly /> px
|
| </td>
|
| </tr>
|
| <tr>
|
| <td colspan="3">
|
| <canvas id="output_file" width="500" height="500"></canvas>
|
| </td>
|
| </tr>
|
| <tr>
|
| <td colspan="2">Image width = <span id="cssxNewImageWidth">0</span> px<br />
|
| Image height = <span id="cssxNewImageHeight">0</span> px<br />
|
| Number of coordinates = <span id="cssxTotalCoordinates">0</span>
|
| </td>
|
| </tr>
|
| <tr>
|
| <td>Recorded coordinates:</td>
|
| <td colspan="2">
|
| <select name="cssxCoordinates" id="cssxCoordinates" size="10" style="width: 320px;">
|
| <option value="-1"></option>
|
| </select>
|
| </td>
|
| </tr>
|
| <tr>
|
| <td>Change the recorded coordinates:</td>
|
| <td colspan="2">
|
| X-coord: <input name="cssxXvalSelect" id="cssxXvalSelect" size="7" maxlength="4" />
|
| Y-coord: <input name="cssxYvalSelect" id="cssxYvalSelect" size="7" maxlength="4" />
|
| </td>
|
| </tr>
|
| <tr>
|
| <td colspan="3">
|
| <input type="button" value="Add" class="button" onclick="jsxAdd()" />
|
| <input type="button" value="Change" class="button" onclick="jsxChange()" />
|
| <input type="button" value="Delete" class="button" onclick="jsxDelete()" />
|
| <input type="button" value="Delete all coordinates" class="button" onclick="jsxDeleteAll()" />
|
| </td>
|
| </tr>
|
| </table>
|
| </form>
|
|
|
| <script>
|
| const canvas = document.getElementById('output_file');
|
| const ctx = canvas.getContext('2d');
|
| let coordinates = [];
|
|
|
| document.getElementById('inputfile').addEventListener('change', loadImage);
|
|
|
| function loadImage(event) {
|
| const file = event.target.files[0];
|
| if (file) {
|
| const reader = new FileReader();
|
| reader.onload = function(e) {
|
| const img = new Image();
|
| img.onload = function() {
|
| canvas.width = img.width;
|
| canvas.height = img.height;
|
| ctx.drawImage(img, 0, 0);
|
| document.getElementById('cssxNewImageWidth').textContent = img.width;
|
| document.getElementById('cssxNewImageHeight').textContent = img.height;
|
| };
|
| img.src = e.target.result;
|
| };
|
| reader.readAsDataURL(file);
|
| }
|
| }
|
|
|
| canvas.addEventListener('mousemove', function(event) {
|
| const rect = canvas.getBoundingClientRect();
|
| const x = event.clientX - rect.left;
|
| const y = event.clientY - rect.top;
|
| document.getElementById('cssxXval').value = x;
|
| document.getElementById('cssxYval').value = y;
|
| });
|
|
|
| canvas.addEventListener('mousedown', function(event) {
|
| const rect = canvas.getBoundingClientRect();
|
| const x = event.clientX - rect.left;
|
| const y = event.clientY - rect.top;
|
| coordinates.push({ x, y });
|
| updateCoordinatesList();
|
| });
|
|
|
| function updateCoordinatesList() {
|
| const select = document.getElementById('cssxCoordinates');
|
| select.innerHTML = '';
|
| coordinates.forEach((coord, index) => {
|
| const option = document.createElement('option');
|
| option.value = index;
|
| option.textContent = `(${coord.x}, ${coord.y})`;
|
| select.appendChild(option);
|
| });
|
| document.getElementById('cssxTotalCoordinates').textContent = coordinates.length;
|
| }
|
|
|
| function jsxAdd() {
|
| const x = parseInt(document.getElementById('cssxXvalSelect').value);
|
| const y = parseInt(document.getElementById('cssxYvalSelect').value);
|
| if (!isNaN(x) && !isNaN(y)) {
|
| coordinates.push({ x, y });
|
| updateCoordinatesList();
|
| }
|
| }
|
|
|
| function jsxChange() {
|
| const select = document.getElementById('cssxCoordinates');
|
| const index = select.value;
|
| if (index >= 0) {
|
| const x = parseInt(document.getElementById('cssxXvalSelect').value);
|
| const y = parseInt(document.getElementById('cssxYvalSelect').value);
|
| if (!isNaN(x) && !isNaN(y)) {
|
| coordinates[index] = { x, y };
|
| updateCoordinatesList();
|
| }
|
| }
|
| }
|
|
|
| function jsxDelete() {
|
| const select = document.getElementById('cssxCoordinates');
|
| const index = select.value;
|
| if (index >= 0) {
|
| coordinates.splice(index, 1);
|
| updateCoordinatesList();
|
| }
|
| }
|
|
|
| function jsxDeleteAll() {
|
| coordinates = [];
|
| updateCoordinatesList();
|
| }
|
| </script>
|
|
|
| </body>
|
| </html>
|
|
|
