如何实现图片点击旋转并保存修改后的图片文件？

我来帮你搞定这个需求！你想要的是实际修改图片文件而非仅视觉旋转，不管是用你原本的PHP配合前端交互，还是用JavaScript方案，都能实现，我给你分两种情况详细说：

方案一：PHP后端+前端交互（实现服务器文件覆盖） #

这个方案能完美满足你「点击旋转预览，提交后覆盖原文件」的需求，核心是前端负责交互预览，后端负责实际修改文件。

1. 前端页面（带交互按钮） #

先做一个带图片预览、旋转按钮和保存按钮的页面，用jQuery简化AJAX请求：

<!DOCTYPE html>
<html>
<head>
    <title>图片旋转保存</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="preview-img" src="test.jpg" alt="待旋转图片" style="max-width: 400px;">
    <br>
    <button id="rotate-btn">旋转180度</button>
    <button id="save-btn">保存修改</button>

    <script>
        let currentRotation = 0;
        let hasUnsavedChange = false;

        // 点击旋转：先做视觉预览，记录旋转角度
        $('#rotate-btn').click(function() {
            currentRotation += 180;
            $('#preview-img').css('transform', `rotate(${currentRotation}deg)`);
            hasUnsavedChange = true;
        });

        // 点击保存：把旋转角度传给PHP后端，触发文件修改
        $('#save-btn').click(function() {
            if (!hasUnsavedChange) {
                alert('还没进行旋转操作哦');
                return;
            }
            $.ajax({
                url: 'rotate-save.php',
                type: 'POST',
                data: { degrees: currentRotation },
                success: function(res) {
                    if (res === 'success') {
                        alert('图片已成功保存！');
                        // 刷新图片，加载最新的服务器文件
                        $('#preview-img').attr('src', 'test.jpg?' + new Date().getTime());
                        hasUnsavedChange = false;
                    } else {
                        alert('保存失败，请检查服务器文件权限');
                    }
                }
            });
        });
    </script>
</body>
</html>

2. 后端PHP文件（rotate-save.php） #

修改你原本的代码，重点是给imagejpeg()传第二个参数（文件名），这样就能覆盖原文件，而不是直接输出到浏览器：

<?php
$filename = 'test.jpg';
$degrees = isset($_POST['degrees']) ? (int)$_POST['degrees'] : 0;

// 检查文件是否存在
if (!file_exists($filename)) {
    echo 'error: 文件不存在';
    exit;
}

// 加载原图
$source = imagecreatefromjpeg($filename);
if (!$source) {
    echo 'error: 无法加载图片';
    exit;
}

// 旋转图片（imagerotate的角度是逆时针，180度正反一致，其他角度注意调整）
$rotate = imagerotate($source, $degrees, 0);
if (!$rotate) {
    echo 'error: 旋转失败';
    imagedestroy($source);
    exit;
}

// 关键：传入文件名实现覆盖保存
if (imagejpeg($rotate, $filename)) {
    echo 'success';
} else {
    echo 'error: 保存失败，请检查文件写入权限';
}

// 释放内存
imagedestroy($source);
imagedestroy($rotate);
?>

注意点：

• 确保服务器对图片所在目录有写入权限（比如给目录设置chmod 755，图片文件设置chmod 644）
• 如果是PNG/GIF格式，要对应替换成imagecreatefrompng()/imagepng()或imagecreatefromgif()/imagegif()函数

方案二：纯JavaScript前端处理（仅支持下载旋转后图片） #

如果你的需求是让用户在前端旋转后下载图片，而非修改服务器文件，可以用Canvas实现，但这个方案无法直接覆盖服务器上的原文件：

<!DOCTYPE html>
<html>
<head>
    <title>前端图片旋转下载</title>
</head>
<body>
    <input type="file" id="img-upload" accept="image/jpeg">
    <br>
    <canvas id="canvas" style="display:none;"></canvas>
    <img id="preview-img" alt="预览图片" style="max-width: 400px;">
    <br>
    <button id="rotate-btn">旋转180度</button>
    <button id="download-btn">下载旋转后的图片</button>

    <script>
        let img = new Image();
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let currentRotation = 0;

        // 上传图片
        document.getElementById('img-upload').addEventListener('change', function(e) {
            let file = e.target.files[0];
            let reader = new FileReader();
            reader.onload = function(event) {
                img.src = event.target.result;
                img.onload = function() {
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    document.getElementById('preview-img').src = img.src;
                }
            }
            reader.readAsDataURL(file);
        });

        // 旋转预览
        document.getElementById('rotate-btn').addEventListener('click', function() {
            if (!img.src) {
                alert('请先上传图片');
                return;
            }
            currentRotation += 180;
            // 用Canvas重新绘制旋转后的图片
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();
            ctx.translate(canvas.width/2, canvas.height/2);
            ctx.rotate(currentRotation * Math.PI / 180);
            ctx.drawImage(img, -img.width/2, -img.height/2);
            ctx.restore();
            // 更新预览图
            document.getElementById('preview-img').src = canvas.toDataURL('image/jpeg');
        });

        // 下载图片
        document.getElementById('download-btn').addEventListener('click', function() {
            if (!img.src) {
                alert('请先上传并旋转图片');
                return;
            }
            let a = document.createElement('a');
            a.href = canvas.toDataURL('image/jpeg');
            a.download = 'rotated-test.jpg';
            a.click();
        });
    </script>
</body>
</html>

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