本地个性化个人名片生成源码（无第三方接口版）

本地个性化个人名片生成源码（无第三方接口版）
**
一、系统架构与技术栈
（一）核心功能模块

• 信息录入：头像上传、姓名 / 职位 / 联系方式 / 个人介绍输入
  

• 样式配置：预设 3 套名片模板，支持自定义 CSS 样式
  

• 本地生成：直接生成 PNG 图片，支持下载保存至本地
  

• 数据存储：本地 JSON 文件存储历史生成记录（可选功能）
  

（二）技术栈选择

• 前端：HTML5/CSS3/JavaScript（原生 JS 无框架依赖）
  

• 后端：php 7.0+（处理图片生成及文件操作）
  

• 图片生成：GD 库（PHP 内置图像处理扩展）
  

• 存储：本地文件系统（无需数据库，数据暂存于data/目录）
  

二、核心代码实现（关键模块解析）
（一）HTML 表单与交互（index.html）
<!-- 名片信息录入表单 -->
<form id="cardForm" enctype="multipart/form-data">
    <input type="file" id="avatar" accept="image/jpeg,image/png" />
    <input type="text" placeholder="姓名" id="name" required />
    <input type="text" placeholder="职位" id="position" />
    <input type="text" placeholder="电话" id="phone" />
    <input type="email" placeholder="邮箱" id="email" />
    <textarea placeholder="个人介绍" id="intro" rows="3"></textarea>

    <!-- 模板选择 -->
    <select id="template">
        <option value="template1">模板1（简约商务）</option>
        <option value="template2">模板2（创意留白）</option>
        <option value="template3">模板3（科技感）</option>
    </select>

    <button type="button">生成名片</button>
</form>

<!-- 实时预览区域 -->
<div id="preview" style="min-height: 300px;"></div>

（二）JavaScript 交互逻辑（script.js）
function generateCard() {
    // 收集表单数据
    const formData = new FormData(document.getElementById('cardForm'));
    const template = document.getElementById('template').value;

    // 发起AJAX请求至PHP处理
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'generate.php');
    xhr.onload = function() {
        if (xhr.status === 200) {
            // 生成预览图片
            const img = new Image();
            img.src = xhr.responseText;
            document.getElementById('preview').innerHTML = '';
            document.getElementById('preview').appendChild(img);

            // 生成下载链接
            const a = document.createElement('a');
            a.href = xhr.responseText;
            a.download = `名片_${new Date().getTime()}.png`;
            a.click();
        }
    };
    xhr.send(formData);
}

（三）PHP 图片生成核心（generate.php）
<?php
header('Content-Type: text/plain');

// 初始化画布（标准名片尺寸：90x55mm，300dpi）
$width = 540; $height = 330; // 像素（90mm*300dpi=2700px，但此处缩小5倍便于浏览器预览）
$image = imagecreatetruecolor($width, $height);
$background = imagecolorallocate($image, 255, 255, 255);
imagefill($image, 0, 0, $background);

// 处理头像上传
if ($_FILES['avatar']['error'] === UPLOAD_ERR_OK) {
    $avatar = imagecreatefromjpeg($_FILES['avatar']['tmp_name']);
    imagecopyresized($image, $avatar, 20, 20, 0, 0, 100, 100, imagesx($avatar), imagesy($avatar));
}

// 文字绘制（根据模板加载不同样式）
$template = $_POST['template'];
$fontPath = 'fonts/NotoSansCJK-Regular.otf'; // 需自行下载字体文件

if ($template === 'template1') {
    // 简约商务模板样式
    imagettftext($image, 20, 0, 150, 60, 0x333333, $fontPath, $_POST['name']);
    imagettftext($image, 14, 0, 150, 90, 0x666666, $fontPath, $_POST['position']);
    // 联系方式
    imagettftext($image, 12, 0, 150, 120, 0x999999, $fontPath, $_POST['phone']);
    imagettftext($image, 12, 0, 150, 140, 0x999999, $fontPath, $_POST['email']);
    // 个人介绍
    imagettftext($image, 12, 0, 20, 200, 0x666666, $fontPath, $_POST['intro']);
}

// 生成PNG并输出Base64
ob_start();
imagepng($image);
$imageData = base64_encode(ob_get_clean());
imagedestroy($image);

echo "data:image/png;base64," . $imageData;
?>

三、目录结构与文件说明
├─ index.html          # 前端主页面
├─ generate.php        # 图片生成接口（PHP核心）
├─ script.js           # 前端交互逻辑
├─ style.css           # 基础样式文件（可自定义）
├─ fonts/              # 字体文件目录（需放入NotoSans等字体）
├─ data/               # 历史记录存储目录（可选JSON文件）
└─ templates/          # 模板配置目录（可扩展更多样式）
    ├─ template1.css   # 模板1样式文件
    ├─ template2.css   # 模板2样式文件
    └─ template3.css   # 模板3样式文件

四、部署与使用说明
（一）环境准备

• 确保服务器支持 PHP 7.0 + 并启用 GD 库（php -m | grep gd检查）
  

• 下载中文字体（如思源黑体）放入fonts/目录
  

• 可直接通过 XAMPP/MAMP 等本地环境运行，无需域名绑定
  

（二）使用流程

• 用户上传头像并填写信息
  

• 选择预设模板或自定义 CSS 样式（修改style.css）
  

• 点击生成，自动下载 PNG 图片并在页面预览
  

• 历史记录可通过修改 PHP 代码实现本地 JSON 存储（示例未包含，需自行扩展）
  

（三）样式自定义
/* 修改style.css实现个性化样式 */
#preview img {
    max-width: 300px; /* 调整预览尺寸 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 添加阴影效果 */
}

/* 模板1样式调整 */
.template1 .name {
    font-size: 24px;
    color: #2c3e50;
    font-weight: bold;
}

五、功能扩展建议
（一）进阶功能开发

• 多模板管理：在templates/目录新增 JSON 配置文件，实现模板参数化管理
  

• 数据持久化：增加本地 JSON 文件存储历史生成记录（示例代码可参考）：
  

// 保存历史记录（在generate.php中添加）
$history = json_decode(file_get_contents('data/history.json'), true) ?: [];
$history[] = [
    'time' => time(),
    'name' => $_POST['name'],
    'image' => $imageData
];
file_put_contents('data/history.json', json_encode($history));

• 二维码生成：集成 PHP QR Code 库，支持生成联系方式二维码
  

（二）安全优化

• 头像上传添加文件类型校验：
  

// 在前端限制文件类型
document.getElementById('avatar').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file.type.startsWith('image/')) {
        alert('请上传图片文件');
        this.value = null;
    }
});

• PHP 端添加文件大小限制（示例限制 2MB）：
  

if ($_FILES['avatar']['size'] > 2 * 1024 * 1024) {
    die('头像文件过大');
}

六、常见问题解决方案
（一）头像无法显示

• 检查generate.php中头像处理代码，确保 GD 库支持 JPEG/PNG 格式
  

• 确认上传文件路径正确，可通过var_dump($_FILES)调试
  

（二）中文字体显示乱码

• 确保fonts/目录存在有效中文字体文件
  

• 在 PHP 绘制文字时指定正确的字体路径：
  

$fontPath = __DIR__ . '/fonts/NotoSansCJK-Regular.otf';

（三）生成图片模糊

• 调整画布尺寸为实际打印尺寸（如 90mm*55mm@300dpi 对应 2700x1650 像素）
  

• 优化图片压缩参数：
  

imagepng($image, null, 9); // 0-9压缩级别，9为最高压缩

通过以上源码方案，可快速搭建一个完全本地化的个人名片生成系统，支持头像上传、多模板切换及个性化信息录入。用户无需依赖第三方接口，所有数据均在本地处理，确保隐私安全与长期可用。如需扩展更多模板或功能，只需修改对应的 HTML/CSS/PHP 代码即可，非常适合个人用户或小型团队使用。

https://www.123865.com/s/vYGlVv-NAApH?提取码:t8zM

支持一下无忧技术吧

支持一下无忧技术吧

谢谢楼主，共同发展无忧技术吧

无忧技术吧 我是来刷分的，嘿嘿

不知该说些什么。。。。。无忧技术吧 。就是谢谢

无忧技术吧 帮帮顶顶！！

无忧技术吧 写的真的很不错

无忧技术吧 好好 学习了 确实不错

无忧技术吧 好好 学习了 确实不错