Question

我有一个使用PHP代码创建的图像，其中代码中的x和y值解释图像上的点。我想在该图像上执行鼠标单击事件，以便对该图像添加任何点并且应该存储在数据库中的任何单击。可能吗？如果可能，我应该使用哪种方法？你能描述一下吗？

这是我的php图像创建代码：

<?php

include('ag_fetching.php');

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

$image = imagecreatetruecolor(800, 800);

$red = imagecolorallocate($image, 250, 0, 0);

for($i=0;$i<$count;$i++)

{
imagefilledellipse($image, $a[$i], $b[$i], 10, 10, $red);

}

imagepng($image,'ag_graph.png');

?>

这里$ a [$ i]，$ b [$ i]是存储有X的数组和要在图像上创建的点的Y坐标并存储在数据库中。因此，包含＆＃34; ag_fetching.php＆＃ 34;文件是为了这个目的。

使用上面的代码，我创建一个背景颜色为黑色的图像，并将其指向红色。我可以通过鼠标点击添加点数，以便将点记录在所需的数据库中吗？

Answer 1

当您在JavaScript中触发click事件时，您可以捕获鼠标所在的像素。这会让你走上正轨吗？

@echo off
setlocal EnableExtensions DisableDelayedExpansion

rem // Define constants here:
set "_ROOT=D:\MyFolder" & rem // (root directory of the tree to find files)
set "_FILE=MyFile.txt"  & rem // (name of the files to find in the tree)
set "_WORD=FROM"        & rem // (keyword to be searched within the files)
set "_CHAR=;"           & rem // (character to be searched within the files)

rem // Walk through the directory tree and find matching files:
for /F "delims=" %%F in ('dir /B /S "%_ROOT%\%_FILE%"') do (
    rem // Retrieve the line number of each occurrence of the keyword:
    for /F "delims=:" %%N in ('findstr /N /I /R "\<%_WORD%\>" "%%~F"') do (
        rem // Process each occurrence of the keyword in a sub-routine:
        call :PROCESS "%%~F" %%N
    )
)

endlocal
exit /B


:PROCESS
rem // Ensure the line number to be numeric and build `skip` option string:
set /A "SKIP=%~2-1"
if %SKIP% GTR 0 (set "SKIP=skip^=%SKIP%") else set "SKIP="
rem // Read file starting from line containing the found keyword:
set "FRST=#"
for /F usebackq^ %SKIP%^ delims^=^ eol^= %%L in ("%~1") do (
    set "LINE=%%L"
    setlocal EnableDelayedExpansion
    rem // Split off everything up to the keyword from the first iterated line:
    if defined FRST set "LINE=!LINE:*%_WORD%=!"
    rem /* Split read line at the first occurrence of the split character;
    rem    the line string is augmented by preceding and appending a space,
    rem    so it is possible to detect whether a split char. is there: */
    for /F "tokens=1,* delims=%_CHAR% eol=%_CHAR%" %%S in (" !LINE! ") do (
        endlocal
        set "TEXT=%%S"
        set "RMND=%%T"
        set "ITEM=%~1"
        setlocal EnableDelayedExpansion
        rem // Check whether a split character is included in the line string:
        if not defined RMND (
            rem // No split char. found, so get string without surrounding spaces:
            set "TEXT=!TEXT:~1,-1!"
        ) else (
            rem // Split char. found, so get string without leading space:
            set "TEXT=!TEXT:~1!"
        )
        rem // Trimm leading white-spaces:
        for /F "tokens=*" %%E in ("!TEXT!") do (
            endlocal
            set "TEXT=%%E"
            setlocal EnableDelayedExpansion
        )
        rem // Return string in case it is not empty:
        if defined TEXT echo(!ITEM!;!TEXT!
        rem // Leave sub-routine in case split char. has been found:
        if defined RMND exit /B
    )
    endlocal
    set "FRST="
)
exit /B

编辑进一步添加代码

imageElement.addEventListener('click', function () {
            alert('ClientX: ' + event.clientX
                + '\nClientY: ' + event.clientY
                + '\nPageX: ' + event.pageX
                + '\nPageY: ' + event.pageY
                + '\nScreenX: ' + event.screenX
                + '\nScreenY: ' + event.screenY
                + '\nX: ' + event.X
                + '\nY: ' + event.Y
                + '\nOffsetX: ' + event.offsetX
                + '\nOffsetY: ' + event.offsetY);
        });

Answer 2

我可以用三个文件来完成：

coords.php ：这是主页面，其中显示图片并捕获点击事件。
coords_img.php ：此文件从数据库中读取坐标x，y，生成带有红点的图像，此图像返回 coords.php 。
coords_db.php ：此文件从点击事件接收x，y坐标并将其存储在数据库中，然后返回 coords.php 刷新页面

接下来三个文件就像魅力一样，您只需创建三个具有相同名称的文件，复制粘贴文件中的下一个代码并在浏览器中打开 coords.php ：

<强> coords.php

<?php
session_start();
if ( ( ! isset($_SESSION["arr_x"]) ) ||
     ( ! isset($_SESSION["arr_y"]) ) )
   { $_SESSION["arr_x"] = array(10,620,50); // ◄■■ THIS IS OUR "DATABASE"
     $_SESSION["arr_y"] = array(10,45,100); // ◄■■ (FOR TESTING PURPOSES).
   }
?>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript">
//====================================================
$(function() // ◄■■ CLICK EVENT OF THE IMAGE.
{ $("#my_image").click( function(e)
    { var offset = $(this).offset();
      $("#x").val( parseInt(e.pageX - offset.left) );
      $("#y").val( parseInt(e.pageY - offset.top) );
      $("#frm_xy").submit(); // ◄■■ GO TO "COORDS_DB.PHP".
    } );
} );
//====================================================
    </script>
  </head>
  <body>
    <br/><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <img id="my_image" src="coords_img.php"/> <!--◄■■ IMAGE WITH RED SPOTS-->

    <form style="display:none" action="coords_db.php" <!--◄■■ HIDDEN FORM-->
          method="post" id="frm_xy">
      <input type="text" id="x" name="x"/>
      <input type="text" id="y" name="y"/>
    </form>
  </body>
</html>

<强> coords_img.php

<?php
ob_start();
session_start();
$image = imagecreatetruecolor(800, 600);
$red = imagecolorallocate($image, 250, 0, 0);

$a = $_SESSION["arr_x"]; // ◄■■ READ COORDINATES
$b = $_SESSION["arr_y"]; // ◄■■ FROM DATABASE.
for ( $i=0; $i < count($a); $i++ )
  imagefilledellipse($image, $a[$i], $b[$i], 10, 10, $red);

header( 'Content-type: image/jpeg' );
ob_end_flush(); // ◄■■ I NEED THIS TO MAKE IT WORK,
ob_end_clean(); // ◄■■ WITHOUT IT I GET NO IMAGE.
imagepng( $image );
?>

<强> coords_db.php

<?php
session_start();
if ( isset($_POST["x"]) && isset($_POST["y"]) )
   { array_push( $_SESSION["arr_x"], $_POST["x"] );  // ◄■■ STORE X AND Y
     array_push( $_SESSION["arr_y"], $_POST["y"] );  // ◄■■ IN DATABASE.
   }
header("location: coords.php"); // ◄■■ RETURN TO REFRESH PAGE.
?>

在我的示例代码中，我使用两个$ _SESSION变量来模拟数据库：$_SESSION["arr_x"]和$_SESSION["arr_y"]，它们工作正常。要使它与真实数据库一起使用，您必须从三个文件中删除两个$ _SESSION变量，然后添加到数据库的连接和 coords_db.php 中的“插入”查询，最后，您在 coords_img.php 中添加了另一个与数据库的连接和“选择”查询。

使用php创建的图像上的鼠标onclick（）事件

2 个答案: