本地个性化个人名片生成源码（无第三方接口版）
本地个性化个人名片生成源码（无第三方接口版）**
一、系统架构与技术栈
（一）核心功能模块
[*]信息录入：头像上传、姓名 / 职位 / 联系方式 / 个人介绍输入
[*]样式配置：预设 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;
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
支持一下:lol无忧技术吧 支持一下:lol无忧技术吧 谢谢楼主，共同发展无忧技术吧 无忧技术吧 我是来刷分的，嘿嘿 不知该说些什么。。。。。无忧技术吧 。就是谢谢 无忧技术吧 帮帮顶顶！！ 无忧技术吧 写的真的很不错 无忧技术吧 好好 学习了 确实不错 无忧技术吧 好好 学习了 确实不错