技术问询：如何实现图片90度旋转？已完成图片上传存储与展示

嘿，很高兴看到你已经搞定了图片上传和展示的核心功能！关于图片90度旋转，这里有几个实用的方案，你可以根据自己的需求灵活选择：

方案一：前端CSS/JavaScript实现（临时旋转，不修改原文件） #

这个方案最快捷，不需要改动服务器上的图片文件，适合仅需在前端展示旋转效果的场景。

用CSS快速实现 #

通过transform: rotate(90deg)直接给图片添加旋转样式，注意旋转后图片的宽高会互换，记得调整width和height避免拉伸：

// 旋转后宽高互换，避免图片拉伸变形
$rotated_width = $display_height;
$rotated_height = $width;

echo "<p><td><img src='" . $source ."' style='transform: rotate(90deg); transform-origin: center;' width='{$rotated_width}' height='{$rotated_height}'...";

如果需要复用样式，可以定义CSS类：

.rotate-90 {
  transform: rotate(90deg);
  transform-origin: center center;
  /* 可选：调整margin避免旋转后布局偏移 */
  margin: 40px 0;
}

然后在PHP输出时添加类名：

echo "<p><td><img src='" . $source ."' class='rotate-90' width='{$rotated_width}' height='{$rotated_height}'...";

用JavaScript处理交互（支持用户主动旋转） #

如果需要让用户点击按钮触发旋转，还可以结合JS实现，并把旋转角度记录到数据库（后面会提到）：

// 给旋转按钮绑定点击事件
document.getElementById('rotate-btn').addEventListener('click', function() {
  const img = document.getElementById('target-img');
  // 获取当前旋转角度，默认0度
  const currentRotate = parseInt(img.style.transform.replace('rotate(', '').replace('deg)', '')) || 0;
  // 每次点击增加90度
  const newRotate = currentRotate + 90;
  img.style.transform = `rotate(${newRotate}deg)`;
  
  // 可选：发送AJAX请求把旋转角度保存到数据库
  const formData = new FormData();
  formData.append('pic_id', '你的图片ID');
  formData.append('angle', newRotate);
  
  fetch('/save-rotation.php', {
    method: 'POST',
    body: formData
  });
});

方案二：后端PHP处理图片文件（永久旋转，修改原文件） #

如果需要永久修改图片的方向（比如用户上传的图片本身是倒的），可以用PHP的GD库或Imagick扩展直接处理服务器上的图片文件。

用GD库实现（PHP内置，无需额外安装） #

// 获取图片在服务器上的完整路径
$serverPicPath = $_SERVER['DOCUMENT_ROOT'] . $row['pic_loc'];
// 获取图片类型信息
$imgInfo = getimagesize($serverPicPath);
$mime = $imgInfo['mime'];

// 根据图片类型创建图像资源
switch($mime) {
    case 'image/jpeg':
        $srcImage = imagecreatefromjpeg($serverPicPath);
        break;
    case 'image/png':
        $srcImage = imagecreatefrompng($serverPicPath);
        // 保留PNG图片的透明度
        imagesavealpha($srcImage, true);
        break;
    case 'image/gif':
        $srcImage = imagecreatefromgif($serverPicPath);
        break;
    default:
        // 不支持的图片格式，直接跳过处理
        return;
}

// 旋转90度（第二个参数为旋转角度，第三个参数为背景色，0表示透明）
$rotatedImage = imagerotate($srcImage, 90, 0);

// 保存旋转后的图片（可以覆盖原文件，也可以新命名保存）
switch($mime) {
    case 'image/jpeg':
        imagejpeg($rotatedImage, $serverPicPath, 90); // 90为图片质量（0-100）
        break;
    case 'image/png':
        imagesavealpha($rotatedImage, true);
        imagepng($rotatedImage, $serverPicPath);
        break;
    case 'image/gif':
        imagegif($rotatedImage, $serverPicPath);
        break;
}

// 释放内存资源
imagedestroy($srcImage);
imagedestroy($rotatedImage);

注意：确保服务器对图片目录有写入权限，如果不想覆盖原文件，可以修改保存路径，比如$serverPicPath = str_replace('.jpg', '_rotated.jpg', $serverPicPath);，同时更新数据库里的pic_loc字段。

方案三：结合数据库记录旋转角度（兼顾用户偏好与原文件） #

如果不想修改原图片，但又要记住用户的旋转设置，可以在数据库中新增一个rotation_angle字段（默认值0），用户旋转后更新该字段，前端展示时根据字段值应用旋转样式：

1. 数据库新增字段（以MySQL为例）：

ALTER TABLE your_image_table ADD COLUMN rotation_angle INT DEFAULT 0;

2. PHP输出图片时读取角度：

$rotationAngle = $row['rotation_angle'] ?? 0;
// 旋转90/270度时，宽高互换
$displayWidth = ($rotationAngle % 180 === 90) ? $display_height : $width;
$displayHeight = ($rotationAngle % 180 === 90) ? $width : $display_height;

echo "<p><td><img id='img-{$row['id']}' src='" . $source ."' style='transform: rotate({$rotationAngle}deg);' width='{$displayWidth}' height='{$displayHeight}'...";

3. 实现保存旋转角度的接口（save-rotation.php）：

// 接收前端传递的图片ID和旋转角度
$picId = $_POST['pic_id'];
$angle = $_POST['angle'];

// 连接数据库并更新字段
$conn = mysqli_connect('localhost', 'your_username', 'your_password', 'your_db');
mysqli_query($conn, "UPDATE your_image_table SET rotation_angle = {$angle} WHERE id = {$picId}");
mysqli_close($conn);

这样用户每次旋转后，下次打开页面时图片会自动应用之前的旋转角度。

内容的提问来源于stack exchange，提问作者VamMeej