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

admin (帅逼1)

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

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

• 样式配置：预设 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 代码即可，非常适合个人用户或小型团队使用。

[color=rgba(0, 0, 0, 0.85)]https://www.123865.com/s/vYGlVv-NAApH?提取码:t8zM

雅调清歌 (帅逼1057)

支持一下无忧技术吧

雅情逸逸致 (帅逼1201)

支持一下无忧技术吧

才情逸世间 (帅逼1147)

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

书魂墨魄 (帅逼1077)

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

竹影清风 (帅逼975)

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

雅意逸时光 (帅逼1169)

无忧技术吧 帮帮顶顶！！

才情逸逸态 (帅逼1187)

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

雅情逸梦香 (帅逼1161)

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

艺海逸逸风 (帅逼1202)

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