当前位置：首页 > PHP

php 实现画板

2026-02-14 06:28:25PHP

使用PHP创建简单画板

PHP结合HTML5 Canvas和JavaScript可以实现网页画板功能。以下是实现方法：

基本HTML结构

创建包含Canvas元素的HTML页面：

<!DOCTYPE html>
<html>
<head>
    <title>PHP画板</title>
    <style>
        #drawingCanvas {
            border: 1px solid #000;
            cursor: crosshair;
        }
        .tools {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="tools">
        <input type="color" id="colorPicker" value="#000000">
        <input type="range" id="brushSize" min="1" max="50" value="5">
        <button id="clearBtn">清除画布</button>
        <button id="saveBtn">保存图像</button>
    </div>
    <canvas id="drawingCanvas" width="800" height="600"></canvas>

    <script>
        // JavaScript绘图逻辑将放在这里
    </script>
</body>
</html>

JavaScript绘图功能

添加绘图交互逻辑：

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
    isDrawing = true;
    draw(e);
}

function draw(e) {
    if (!isDrawing) return;

    ctx.lineWidth = document.getElementById('brushSize').value;
    ctx.lineCap = 'round';
    ctx.strokeStyle = document.getElementById('colorPicker').value;

    ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}

function stopDrawing() {
    isDrawing = false;
    ctx.beginPath();
}

document.getElementById('clearBtn').addEventListener('click', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

document.getElementById('saveBtn').addEventListener('click', function() {
    const dataURL = canvas.toDataURL('image/png');

    // 发送到PHP保存
    fetch('save_image.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'image=' + encodeURIComponent(dataURL)
    })
    .then(response => response.text())
    .then(data => alert(data))
    .catch(error => console.error('Error:', error));
});

PHP保存图像处理

创建save_image.php文件处理图像保存：

<?php
if (isset($_POST['image'])) {
    $imageData = $_POST['image'];

    // 移除数据URL前缀
    $filteredData = str_replace('data:image/png;base64,', '', $imageData);
    $filteredData = str_replace(' ', '+', $filteredData);

    // 解码Base64数据
    $unencodedData = base64_decode($filteredData);

    // 生成唯一文件名
    $fileName = 'drawings/drawing_' . time() . '.png';

    // 确保目录存在
    if (!file_exists('drawings')) {
        mkdir('drawings', 0777, true);
    }

    // 保存文件
    file_put_contents($fileName, $unencodedData);

    echo "图像已保存为: " . $fileName;
} else {
    echo "没有接收到图像数据";
}
?>