JavaScript 与 PHP 交互：在同一页面传递 Canvas 点击坐标-php教程-PHP中文网

JavaScript 与 PHP 交互：在同一页面传递 Canvas 点击坐标

聖光之護

发布： 2025-10-04 14:07:01

原创

770人浏览过

javascript 与 php 交互：在同一页面传递 canvas 点击坐标

本文档旨在提供一个清晰的指南，说明如何在同一页面上将 JavaScript Canvas 点击事件的坐标和颜色信息传递给 PHP。我们将使用 Fetch API 发送数据到服务器，并展示如何在 PHP 中接收和处理这些数据，实现点击 Canvas 上特定颜色区域后从数据库检索相关信息的功能。

使用 Fetch API 将 Canvas 点击坐标传递给 PHP

要在 JavaScript 中获取 Canvas 点击坐标和颜色，并将其传递给 PHP，可以使用 Fetch API。Fetch API 提供了一种现代、灵活的方式来发出网络请求。

JavaScript 代码

以下 JavaScript 代码演示了如何获取 Canvas 点击坐标和颜色，并使用 Fetch API 将其发送到 PHP 脚本：

const componentToHex = c => {
  let hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex
};
const rgbToHex = (r, g, b) => "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);


function getCursorPosition(canvas, event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  //console.log("x: " + x + " y: " + y);

  var ctx = canvas.getContext("2d");
  ctx.beginPath();

  var pixel = ctx.getImageData(x, y, 1, 1).data;
  var hex = "#" + ("000000" + rgbToHex(pixel[0], pixel[1], pixel[2])).slice(-6);

  return { x: x, y: y, hex: hex }; // 返回一个包含坐标和颜色的对象
}

var canvas = document.getElementById('myCanvas');
canvas.addEventListener("mousedown", function(e) {
  const pos = getCursorPosition(canvas, e);
  console.log(pos);
  // 发送数据到 server.php
  fetch('server.php?' + new URLSearchParams(pos))
    .then(response => response.text()) // 或者 response.json()，取决于 PHP 的返回
    .then(data => {
      console.log(data); // 处理来自 PHP 的响应
      alert(data); // 显示来自 PHP 的数据
    });
});

登录后复制

代码解释：

立即学习“PHP免费学习笔记（深入）”；

componentToHex 和 rgbToHex 函数用于将 RGB 颜色值转换为十六进制颜色代码。
getCursorPosition 函数获取 Canvas 点击事件的坐标，并使用 getImageData 方法获取点击位置的像素颜色。
使用 fetch 函数向 server.php 发送包含坐标和颜色的查询字符串。
.then 链式调用处理服务器的响应。

PHP 代码 (server.php)

以下 PHP 代码演示了如何在 server.php 中接收 JavaScript 发送的坐标和颜色数据，并从数据库中检索相关信息：

小羊标书

一键生成百页标书，让投标更简单高效

查看详情

<?php
// 确保收到了 x, y 和 hex 参数
if (isset($_GET['x']) && isset($_GET['y']) && isset($_GET['hex'])) {
  $x = $_GET['x'];
  $y = $_GET['y'];
  $hex = $_GET['hex'];

  // 连接到数据库 (请根据你的数据库配置修改)
  $servername = "localhost";
  $username = "username";
  $password = "password";
  $dbname = "myDB";

  $conn = new mysqli($servername, $username, $password, $dbname);

  // 检查连接
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  }

  // 构建 SQL 查询 (根据你的数据库结构和需求修改)
  // 示例：根据坐标和颜色查询数据库
  $sql = "SELECT * FROM circles WHERE x = '$x' AND y = '$y' AND color = '$hex'";

  $result = $conn->query($sql);

  if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
      echo "id: " . $row["id"]. " - Name: " . $row["name"]. " - Color: " . $row["color"]. "<br>";
    }
  } else {
    echo "No results found for x: $x, y: $y, hex: $hex";
  }

  $conn->close();
} else {
  echo "Error: Missing parameters";
}
?>

登录后复制

代码解释：

立即学习“PHP免费学习笔记（深入）”；

isset 函数检查是否通过 GET 方法传递了 x、y 和 hex 参数。
建立与 MySQL 数据库的连接。请根据你的数据库配置修改连接参数。
构建 SQL 查询语句，根据接收到的坐标和颜色信息从数据库中检索数据。请务必对输入进行适当的验证和转义，以防止 SQL 注入攻击。
执行查询并返回结果。
关闭数据库连接。

HTML 代码

以下 HTML 代码包含 Canvas 元素和 JavaScript 代码：

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Click Example</title>
</head>
<body>
  <div id='text' style='text-align:center;'>
    <canvas id='myCanvas' width='400' height='600' style='border:1px solid #000000;'></canvas>
  </div>

  <script>
    // JavaScript code from above goes here
  </script>
</body>
</html>

登录后复制

注意事项

安全性： 请务必对 JavaScript 传递给 PHP 的数据进行验证和转义，以防止 SQL 注入攻击。可以使用 mysqli_real_escape_string() 函数来转义字符串。
错误处理： 在 PHP 代码中添加适当的错误处理机制，例如检查数据库连接是否成功，以及查询是否返回了结果。
跨域问题： 如果 JavaScript 和 PHP 代码位于不同的域名下，可能会遇到跨域问题。需要在 PHP 服务器上配置 CORS 头部，允许来自 JavaScript 域名的请求。
数据格式： 可以根据实际需求选择不同的数据传输格式，例如 JSON。如果使用 JSON，需要使用 json_encode() 函数将 PHP 数据编码为 JSON 格式，并在 JavaScript 中使用 JSON.parse() 函数解析 JSON 数据。
性能优化: 如果需要频繁进行数据交互，可以考虑使用 WebSocket 技术，建立持久连接，提高数据传输效率。

总结

本文档提供了一个完整的示例，演示了如何在同一页面上将 JavaScript Canvas 点击事件的坐标和颜色信息传递给 PHP，并从数据库中检索相关信息。通过使用 Fetch API，可以轻松地实现 JavaScript 和 PHP 之间的交互。请务必注意安全性、错误处理和跨域问题，并根据实际需求进行适当的调整。

以上就是JavaScript 与 PHP 交互：在同一页面传递 Canvas 点击坐标的详细内容，更多请关注php中文网其它相关文章！