看世界论坛个人主页头像设置逻辑
原创
在设计个人主页时，我加入了用户头像的功能，这样能让整个论坛更加人性化。
这里在用户注册会员时，我会在表单中加入头像的上传功能，用户可以选择性上传头像，但我没有标注可以不上传。这样的话，不明所以的人都会选择直接上传，以免后期让用户再去上传会让人疲倦。
因为我使用了这个表单中相同的图片处理功能，所以在讲个人主页头像设置时，需要额外去讲下这个逻辑怎么完成的。
首先，我们要明白头像一般是正方形的，所以我们需要设置它的大小为一定值，且一定要是正方形，我们不能规定用户一定要上传正方形头像，但是我们要让用户上传后被处理出来的照片是张方形的。
这里的我设置最大宽度为200px，如果不是方形头像则填充白色让其变成方形，以下是相关代码：
// 压缩图片
$maxWidth = 200; // 设置最大宽度
$maxHeight = 200; // 设置最大高度// 创建新的图像资源
$compressedImage = imagecreatetruecolor($maxWidth, $maxHeight);
// 填充背景色为白色
$white = imagecolorallocate($compressedImage, 255, 255, 255);
imagefill($compressedImage, 0, 0, $white);整体的对图片进行处理的代码为：
<?php
// 获取上传的图片信息
$imageInfo = getimagesize($file['tmp_name']);
$imageType = $imageInfo[2];
// 根据图片类型创建对应的图像资源
switch ($imageType) {
case IMAGETYPE_JPEG:
$source = imagecreatefromjpeg($file['tmp_name']);
break;
case IMAGETYPE_PNG:
$source = imagecreatefrompng($file['tmp_name']);
break;
case IMAGETYPE_GIF:
$source = imagecreatefromgif($file['tmp_name']);
break;
default:
// 不支持的图片类型
break;
}
// 压缩图片
$maxWidth = 200; // 设置最大宽度
$maxHeight = 200; // 设置最大高度
$width = imagesx($source);
$height = imagesy($source);
// 计算剪切后的宽度和高度
if ($width > $height) {
$newWidth = $maxWidth;
$newHeight = $height * ($maxWidth / $width);
} else {
$newWidth = $width * ($maxHeight / $height);
$newHeight = $maxHeight;
}
// 创建新的图像资源
$compressedImage = imagecreatetruecolor($maxWidth, $maxHeight);
// 填充背景色为白色
$white = imagecolorallocate($compressedImage, 255, 255, 255);
imagefill($compressedImage, 0, 0, $white);
// 计算剪切的起始坐标
$offsetX = ($maxWidth - $newWidth) / 2;
$offsetY = ($maxHeight - $newHeight) / 2;
// 剪切并压缩图片
imagecopyresampled($compressedImage, $source, $offsetX, $offsetY, 0, 0, $newWidth, $newHeight, $width, $height);
// 保存压缩后的图片
imagejpeg($compressedImage, $uploadFile, 80); // 第三个参数是压缩质量，可以根据需要进行调整
// 释放资源
imagedestroy($source);
imagedestroy($compressedImage);这个代码被我保存成了yasuo.php引用，因为我需要在个人主页也要去调用，避免重复，大家也可以像我一样调用。
所以在表单中上传头像，我是这样引用处理的：
// 检查是否选择了要上传的头像文件
if (isset($_FILES['avatar']) && $_FILES['avatar']['error'] === UPLOAD_ERR_OK) {
$file = $_FILES['avatar'];
$uploadDir = 'img/userhead/';
$uploadFile = $uploadDir . $userId . '.' . pathinfo($file['name'], PATHINFO_EXTENSION); // 使用原始文件名作为头像文件名
require_once 'yasuo.php';
// 更新用户数据中的头像字段
$updateSql = "UPDATE users SET avatar = '$uploadFile' WHERE id = $userId";
$conn->query($updateSql);
}用户上传的头像保存在了img/userhead/，并使用了yasuo.php中相应代码进行压缩处理。
现在我们明白了处理逻辑，现在就是需要去设计个人主页的样式和编辑方式。
我的方法是，在个人主页中做一个圆形的头像展示，用户头像就展示在这里，但是如果用户没有上传头像，则使用昵称的第一个字作为头像，如果是汉字就展示汉字，字母就展示字母，这很简单。
相应代码为：
<?php
// 检查用户是否有头像
if (!empty($userData['avatar'])) {
$avatarPath = $userData['avatar'];
echo "<img src='$avatarPath' alt='用户头像' class='img-thumbnail rounded-circle img-fluid' style='max-width: 100px;'>";
} else {
$nickname = $userData['nickname'];
$initial = mb_strtoupper(mb_substr($nickname, 0, 1));
echo "<div class='rounded-circle bg-secondary text-light d-flex align-items-center justify-content-center' style='width: 100px; height: 100px; font-size: 60px;'>$initial</div>";
}
?>然后我们需要在点击的时候对头像进行编辑，需要知道的是，应该是用户本人或者管理员是有这个权限进行编辑的，其他人是没有编辑入口的，甚至无法点击。
从这个逻辑出发，我们需要做的就是，要校验用户的权限并且对上传头像的逻辑进行设计。
因为我在用户表中加入了role的权限值，这样就能获取用户是否是管理员。细心的人就能看到，用户主页后面是有相应用户组的徽标显示的，我是这样设置的：
function getUserRoleName($role) {
switch ($role) {
case 1:
return '创始人';
case 2:
return '管理员';
case 3:
return '创作者';
case 4:
return '粉丝';
default:
return '未知角色';
}
}所以我要保证登录用户ID与当前用户ID相同或者role值小于等于2即可修改头像，否则只显示头像，而无法进行编辑操作。
这里编辑的功能就是使用form表单使用post方式提交，然后绑定上传的js事件和后端提交代码。
php：
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['avatar']) && $_FILES['avatar']['error'] === UPLOAD_ERR_OK) {
$file = $_FILES['avatar'];
$uploadDir = 'img/userhead/';
$userID = isset($_GET['user_id']) ? $_GET['user_id'] : $userId;
$uploadFile = $uploadDir . $userID . '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
require_once 'yasuo.php';
// 更新用户数据中的头像字段
$updateSql = "UPDATE users SET avatar = '$uploadFile' WHERE id = $userID";
$conn->query($updateSql);
// 返回上传成功的响应
$response = [
'success' => true,
'avatarPath' => $uploadFile
];
// 将用户重定向到原页面
header('Location: ' . $_SERVER['HTTP_REFERER']);
exit();
} else {
// 返回上传失败的响应
$response = [
'success' => false
];
}html：
<?php if ($loginUserRole <= 2 || $userData['id'] === $userId) : ?>
<form id="avatarUploadForm" method="POST" enctype="multipart/form-data" action="">
<?php if (!empty($userData['avatar'])) : ?>
<img src="<?php echo $userData['avatar']; ?>" title="点击可以修改头像" alt="用户头像" class="img-thumbnail rounded-circle img-fluid" style="max-width: 100px; cursor: pointer;" onclick="uploadAvatar()">
<?php else : ?>
<div class="rounded-circle bg-secondary text-light d-flex align-items-center justify-content-center" style="width: 100px; height: 100px; font-size: 60px; cursor: pointer;" onclick="uploadAvatar()">
<?php echo mb_strtoupper(mb_substr($userData['nickname'], 0, 1)); ?>
</div>
<?php endif; ?>
<input type="file" id="avatarInput" name="avatar" style="display: none;">
</form>
<?php else : ?>
<?php if (!empty($userData['avatar'])) : ?>
<img src="<?php echo $userData['avatar']; ?>" title="用户头像" alt="用户头像" class="img-thumbnail rounded-circle img-fluid" style="max-width: 100px;">
<?php else : ?>
<div class="rounded-circle bg-secondary text-light d-flex align-items-center justify-content-center" style="width: 100px; height: 100px; font-size: 60px;">
<?php echo mb_strtoupper(mb_substr($userData['nickname'], 0, 1)); ?>
</div>
<?php endif; ?>
<?php endif; ?>js：
<script>
function uploadAvatar() {
document.getElementById('avatarInput').click();
}
document.getElementById('avatarInput').addEventListener('change', function() {
document.getElementById('avatarUploadForm').submit();
});
</script>是的，在这里后端我也用了yasuo.php用于压缩头像和修改成正方形。
现在整个权限来看逻辑就是对的，如果是普通用户访问别人的主页，如center.php?user_id=4，无法点击用户头像进行编辑，但是访问自己的页面center.php就可以编辑头像；管理员和创始人是可以访问任何人页面进行编辑头像的，因为管理员基本都是信得过的人，所以我没有加入管理员不能相互修改，甚至修改创始人头像的限制。
好了，今天的分享就到这里了，希望对大家有所帮助！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。