利用Fetch API在Canvas点击事件中实现JS到PHP的数据传递

<?php
// PHP部分：输出Canvas结构
// 此处的Canvas尺寸和样式可根据实际需求调整
echo("<div id='text' style='text-align:center;'>");
echo("<canvas id='myCanvas' width='400' height='600' style='border:1px solid #000000;'></canvas>");
echo("</div>");
?>

// JavaScript部分：获取Canvas并添加事件监听
var canvas = document.getElementById('myCanvas');
if (canvas) {
    canvas.addEventListener("mousedown", function (e) {
        // 当鼠标点击Canvas时，调用处理函数
        handleCanvasClick(canvas, e);
    });
} else {
    console.error("Canvas元素未找到！");
}

// 辅助函数：将颜色分量转换为两位十六进制
const componentToHex = c => {
  let hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
};

// 辅助函数：将RGB颜色转换为十六进制
const rgbToHex = (r, g, b) => "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);

/**
 * 获取Canvas点击位置的坐标和像素颜色
 * @param {HTMLCanvasElement} canvas - Canvas元素
 * @param {MouseEvent} event - 鼠标事件对象
 * @returns {object} 包含x、y坐标和十六进制颜色值的对象
 */
function getCursorPositionAndColor(canvas, event) {
  const rect = canvas.getBoundingClientRect(); // 获取Canvas在视口中的位置和大小
  const x = event.clientX - rect.left;       // 计算点击点相对于Canvas左上角的X坐标
  const y = event.clientY - rect.top;        // 计算点击点相对于Canvas左上角的Y坐标

  var ctx = canvas.getContext("2d");
  // 获取点击位置1x1像素的图像数据
  var pixel = ctx.getImageData(x, y, 1, 1).data;
  // 将RGB颜色数据转换为十六进制格式
  var hex = "#" + ("000000" + rgbToHex(pixel[0], pixel[1], pixel[2])).slice(-6);

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

// 完善事件监听器处理函数，发送数据到PHP
function handleCanvasClick(canvas, e) {
    const clickData = getCursorPositionAndColor(canvas, e);
    console.log("Canvas点击数据:", clickData);

    // 假设我们只关心红色（#FF0000）的点击
    if (clickData.hex.toLowerCase() === '#ff0000') {
        // 使用Fetch API将数据作为查询参数发送到后端PHP脚本
        fetch('server.php?' + new URLSearchParams({
            x: clickData.x,
            y: clickData.y,
            hex: clickData.hex
        }))
        .then(response => {
            // 检查网络响应是否成功
            if (!response.ok) {
                throw new Error('网络响应不佳 ' + response.statusText);
            }
            return response.json(); // 假设PHP返回JSON格式的数据
        })
        .then(data => {
            // 成功接收PHP返回的数据，并进行处理
            if (data.status === 'success') {
                alert(`从数据库获取的数据: ${JSON.stringify(data.data, null, 2)}`);
            } else if (data.status === 'info') {
                alert(`提示: ${data.message}`);
            } else {
                alert(`错误: ${data.message || '未知错误'}`);
            }
        })
        .catch(error => {
            // 捕获并处理Fetch操作中的错误
            console.error('Fetch操作出现问题:', error);
            alert('获取数据失败，请稍后再试。');
        });
    } else {
        alert(`您点击的像素颜色是: ${clickData.hex}，不是红色区域。`);
    }
}

// server.php 示例
<?php
// 设置响应头，告知客户端返回的是JSON数据
header('Content-Type: application/json');

$response = ['status' => 'error', 'message' => '无效请求或参数缺失'];

// 检查并获取前端发送的参数
if (isset($_GET['x']) && isset($_GET['y']) && isset($_GET['hex'])) {
    // 过滤和验证输入数据，防止安全问题
    $x = filter_var($_GET['x'], FILTER_VALIDATE_INT);
    $y = filter_var($_GET['y'], FILTER_VALIDATE_INT);
    $hex = filter_var($_GET['hex'], FILTER_SANITIZE_STRING); // 过滤字符串

    // 确保数据有效
    if ($x === false || $y === false || $hex === false) {
        $response = ['status' => 'error', 'message' => '参数格式不正确'];
    } else {
        // 进一步验证颜色是否是预期的红色
        if (strtolower($hex) === '#ff0000') {
            // --- 实际数据库查询逻辑开始 ---
            // 这里应包含您的数据库连接代码
            // 例如：
            // $mysqli = new mysqli("localhost", "user", "password", "database");
            // if ($mysqli->connect_errno) {
            //     $response = ['status' => 'error', 'message' => '数据库连接失败: ' . $mysqli->connect_error];
            //     echo json_encode($response);
            //     exit();
            // }

            // 假设根据点击的坐标和颜色从数据库中查询相关数据
            // 这是一个模拟的数据库查询，实际应用中需要编写具体的SQL语句
            // 例如：SELECT circle_id, description FROM circles WHERE color = ? AND ST_Contains(geom, POINT(?, ?))

            // 模拟从数据库获取的数据
            $dataFromDB = [
                'circle_id' => rand(100, 999),
                'description' => "这是一个红色的圆圈，位于 Canvas 的 ({$x}, {$y}) 附近。",
                'additional_info' => '该区域的价值可能很高。',
                'query_time' => date('Y-m-d H:i:s')
            ];
            $response = ['status' => 'success', 'data' => $dataFromDB];

            // 关闭数据库连接
            // $mysqli->close();
            // --- 实际数据库查询逻辑结束 ---

        } else {
            $response = ['status' => 'info', 'message' => '点击的不是红色区域', 'hex_color' => $hex];
        }
    }
}

// 将PHP数组编码为JSON字符串并输出
echo json_encode($response);
?>