家明故事

PHP实现扫码签到电子纪念卡

家明 0 0

客户需求：年轻化签到：采用“扫码签到+电子纪念卡”扫码填写信息后，自动生成全飞pro体验官电子卡（可自定义添加头像昵称，印上摆脱近视，我在爱尔pro千例现场等相关文字），转发到朋友圈。

年轻化签到系统设计与实现

我将设计一个采用"扫码签到+电子纪念卡"的PHP网页应用，实现扫码填写信息后自动生成全飞pro体验官电子卡的功能。

设计思路

首先分析需求：

  1. 扫码签到功能

  2. 信息填写表单

  3. 电子纪念卡生成（含自定义头像、昵称和文字）

  4. 朋友圈分享功能

实现方案

下面是完整的PHP实现代码：

php
<?php
// 处理表单提交和图像生成
session_start();

// 数据库连接（示例使用SQLite，实际可根据需要更换MySQL）
try {
    $db = new PDO('sqlite:signatures.db');
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    // 创建表（如果不存在）
    $db->exec("CREATE TABLE IF NOT EXISTS signatures (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT NOT NULL,
        nickname TEXT,
        avatar_path TEXT,
        sign_time DATETIME DEFAULT CURRENT_TIMESTAMP
    )");
} catch (PDOException $e) {
    die("数据库连接错误: " . $e->getMessage());
}

// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = trim($_POST['name']);
    $nickname = trim($_POST['nickname']);
    
    // 处理上传的头像
    $avatarPath = null;
    if (isset($_FILES['avatar']) && $_FILES['avatar']['error'] === UPLOAD_ERR_OK) {
        $uploadDir = 'uploads/';
        if (!is_dir($uploadDir)) {
            mkdir($uploadDir, 0755, true);
        }
        
        $fileExtension = pathinfo($_FILES['avatar']['name'], PATHINFO_EXTENSION);
        $fileName = uniqid() . '.' . $fileExtension;
        $avatarPath = $uploadDir . $fileName;
        
        move_uploaded_file($_FILES['avatar']['tmp_name'], $avatarPath);
    }
    
    // 保存到数据库
    $stmt = $db->prepare("INSERT INTO signatures (name, nickname, avatar_path) VALUES (?, ?, ?)");
    $stmt->execute([$name, $nickname, $avatarPath]);
    $signatureId = $db->lastInsertId();
    
    // 生成电子纪念卡
    $cardImage = generateElectronicCard($name, $nickname, $avatarPath);
    
    // 保存卡片到会话
    $_SESSION['card_image'] = $cardImage;
    $_SESSION['signature_id'] = $signatureId;
    
    // 重定向到结果页面
    header('Location: ' . $_SERVER['PHP_SELF'] . '?success=1');
    exit;
}

// 显示成功页面
if (isset($_GET['success']) && isset($_SESSION['card_image'])) {
    displaySuccessPage($_SESSION['card_image'], $_SESSION['signature_id']);
    exit;
}

// 生成电子纪念卡函数
function generateElectronicCard($name, $nickname, $avatarPath) {
    // 创建背景图像（假设尺寸为600x800）
    $image = imagecreatetruecolor(600, 800);
    
    // 分配颜色
    $white = imagecolorallocate($image, 255, 255, 255);
    $black = imagecolorallocate($image, 0, 0, 0);
    $blue = imagecolorallocate($image, 0, 102, 204);
    
    // 填充背景
    imagefill($image, 0, 0, $white);
    
    // 添加渐变背景
    for ($i = 0; $i < 600; $i++) {
        $color = imagecolorallocate($image, 240 - $i/6, 240 - $i/6, 255);
        imageline($image, $i, 0, $i, 800, $color);
    }
    
    // 添加标题
    $fontTitle = __DIR__ . '/fonts/msyh.ttf'; // 使用微软雅黑字体，需要确保字体文件存在
    imagettftext($image, 28, 0, 180, 80, $blue, $fontTitle, "全飞pro体验官");
    
    // 添加用户信息
    imagettftext($image, 20, 0, 250, 150, $black, $fontTitle, "姓名: " . $name);
    imagettftext($image, 20, 0, 250, 190, $black, $fontTitle, "昵称: " . $nickname);
    
    // 添加头像
    if ($avatarPath && file_exists($avatarPath)) {
        $avatar = null;
        $ext = strtolower(pathinfo($avatarPath, PATHINFO_EXTENSION));
        
        if ($ext === 'jpg' || $ext === 'jpeg') {
            $avatar = imagecreatefromjpeg($avatarPath);
        } elseif ($ext === 'png') {
            $avatar = imagecreatefrompng($avatarPath);
        }
        
        if ($avatar) {
            // 调整头像大小并裁剪为圆形
            $avatarWidth = imagesx($avatar);
            $avatarHeight = imagesy($avatar);
            $size = min($avatarWidth, $avatarHeight);
            $cropped = imagecrop($avatar, ['x' => ($avatarWidth - $size) / 2, 'y' => ($avatarHeight - $size) / 2, 'width' => $size, 'height' => $size]);
            
            // 创建圆形掩码
            $mask = imagecreatetruecolor(150, 150);
            imagealphablending($mask, false);
            $transparent = imagecolorallocatealpha($mask, 0, 0, 0, 127);
            imagefill($mask, 0, 0, $transparent);
            
            $black = imagecolorallocate($mask, 0, 0, 0);
            imagefilledellipse($mask, 75, 75, 150, 150, $black);
            
            // 应用圆形掩码
            imagealphablending($cropped, true);
            imagesavealpha($cropped, true);
            imagecopy($cropped, $mask, 0, 0, 0, 0, 150, 150);
            
            // 将头像添加到主图像
            imagecopyresampled($image, $cropped, 100, 130, 0, 0, 150, 150, 150, 150);
            
            imagedestroy($avatar);
            imagedestroy($cropped);
            imagedestroy($mask);
        }
    }
    
    // 添加宣传文字
    imagettftext($image, 22, 0, 150, 350, $blue, $fontTitle, "摆脱近视，我在爱尔pro千例现场");
    imagettftext($image, 18, 0, 180, 400, $black, $fontTitle, "体验全飞秒激光手术");
    imagettftext($image, 18, 0, 200, 450, $black, $fontTitle, "享受清晰视界");
    
    // 添加二维码（示例）
    $qrCode = imagecreatefrompng('https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' . urlencode("https://www.aier.com"));
    imagecopyresampled($image, $qrCode, 225, 500, 0, 0, 150, 150, 150, 150);
    imagedestroy($qrCode);
    
    // 添加底部文字
    imagettftext($image, 16, 0, 180, 700, $black, $fontTitle, "扫描二维码了解更多");
    
    // 保存图像到临时文件
    $filename = 'cards/card_' . time() . '.png';
    if (!is_dir('cards')) {
        mkdir('cards', 0755, true);
    }
    imagepng($image, $filename);
    imagedestroy($image);
    
    return $filename;
}

// 显示成功页面
function displaySuccessPage($cardImage, $signatureId) {
    // 显示HTML页面
    echo '<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>签到成功 - 全飞pro体验官</title>
        <style>
            body {
                font-family: "Microsoft YaHei", sans-serif;
                background-color: #f5f7fa;
                margin: 0;
                padding: 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .container {
                max-width: 800px;
                background: white;
                border-radius: 15px;
                box-shadow: 0 5px 20px rgba(0,0,0,0.1);
                padding: 30px;
                text-align: center;
                margin-top: 20px;
            }
            h1 {
                color: #1a73e8;
                margin-bottom: 30px;
            }
            .card-container {
                margin: 20px 0;
                border: 2px dashed #1a73e8;
                padding: 10px;
                border-radius: 10px;
                display: inline-block;
            }
            .card-image {
                max-width: 100%;
                height: auto;
                border-radius: 8px;
            }
            .btn {
                background-color: #1a73e8;
                color: white;
                border: none;
                padding: 12px 25px;
                border-radius: 30px;
                font-size: 16px;
                cursor: pointer;
                margin: 10px;
                transition: background-color 0.3s;
                text-decoration: none;
                display: inline-block;
            }
            .btn:hover {
                background-color: #0d61cb;
            }
            .btn-share {
                background-color: #06c;
            }
            .actions {
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>🎉 签到成功！</h1>
            <p>您的全飞pro体验官电子纪念卡已生成</p>
            
            <div class="card-container">
                <img src="' . $cardImage . '" alt="全飞pro体验官电子卡" class="card-image">
            </div>
            
            <div class="actions">
                <a href="' . $cardImage . '" download="全飞pro体验官电子卡.png" class="btn">下载电子卡</a>
                <a href="javascript:void(0);" class="btn btn-share" onclick=shareToWechat()">分享到朋友圈</a>
            </div>
            
            <p style="margin-top: 30px; color: #666;">感谢您参与爱尔眼科全飞秒激光体验活动！</p>
        </div>
        
        <script>
            function shareToWechat() {
                alert("请使用微信扫描二维码分享到朋友圈\\n\\n或者点击右上角菜单分享");
            }
        </script>
    </body>
    </html>';
    
    // 清除会话数据
    unset($_SESSION['card_image']);
    unset($_SESSION['signature_id']);
}

// 如果没有提交表单，显示表单页面
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全飞pro体验官签到</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 500px;
            padding: 30px;
        }
        h1 {
            color: #1a73e8;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"],
        input[type="file"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            box-sizing: border-box;
        }
        input[type="file"] {
            padding: 8px;
        }
        .btn {
            background-color: #1a73e8;
            color: white;
            border: none;
            padding: 15px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #0d61cb;
        }
        .qr-code {
            text-align: center;
            margin: 20px 0;
        }
        .note {
            color: #666;
            font-size: 14px;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>全飞pro体验官签到</h1>
        
        <div class="qr-code">
            <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=<?php echo urlencode($_SERVER['PHP_SELF']); ?>" alt="签到二维码">
            <p>请扫描二维码进行签到</p>
        </div>
        
        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required>
            </div>
            
            <div class="form-group">
                <label for="nickname">昵称:</label>
                <input type="text" id="nickname" name="nickname" required>
            </div>
            
            <div class="form-group">
                <label for="avatar">上传头像:</label>
                <input type="file" id="avatar" name="avatar" accept="image/*" required>
            </div>
            
            <button type="submit" class="btn">生成电子纪念卡</button>
        </form>
        
        <p class="note">提交后即可生成专属电子纪念卡，可分享到朋友圈</p>
    </div>
</body>
</html>

功能说明

  1. 扫码签到功能：页面顶部显示二维码，扫描后可跳转到本页面进行签到

  2. 信息收集表单：

    • 姓名输入

    • 昵称输入

    • 头像上传

  3. 电子纪念卡生成：

    • 使用PHP GD库动态生成图片

    • 包含用户上传的头像（裁剪为圆形）

    • 添加宣传文字："摆脱近视，我在爱尔pro千例现场"

    • 包含二维码和底部文字

  4. 分享功能：

    • 提供下载电子卡按钮

    • 提供分享到朋友圈功能（模拟）

使用说明

  1. 将代码保存为PHP文件（如sign.php）

  2. 确保服务器支持GD库和SQLite（或修改为MySQL）

  3. 创建uploads和cards目录并设置写入权限

  4. 上传中文字体文件（如msyh.ttf）到同一目录

  5. 通过浏览器访问该文件

扩展建议

  1. 可添加数据库管理功能查看签到记录

  2. 可增加微信JSSDK实现真正的朋友圈分享

  3. 可添加更多自定义选项（如选择不同模板）

  4. 可增加短信验证或微信授权获取用户信息

这个实现满足了需求中的所有功能点，并提供了良好的用户体验。

标签：PHP  扫码签到  

版权声明：本站部分内容来自互联网，若涉及版权问题请及时通知我们，我们将及时予以删除！谢谢大家的理解与支持！
打赏

上一篇：PHP常用Excel库及用法详解

下一篇：微店H5版与小程序版对比分析

相关文章

发表评论