下面给你一个 基于 HTML5 Canvas 实现“图片旋转 + 下载””的完整可运行示例代码，包含：

✔ 图片上传
✔ Canvas 绘制图片
✔ 旋转 90° / 180° / 270°
✔ 自由输入角度旋转
✔ 下载旋转后的图片
✔ 纯 HTML5 + 原生 JS，无需任何库

复制即可直接运行，非常适合移动端或 Web 项目。

⭐ 完整代码（HTML + CSS + JavaScript 一体）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 图片旋转与下载 Demo</title>

<style>
    body {
        font-family: Arial, sans-serif;
        padding: 12px;
        background: #f3f3f3;
    }
    .box {
        background: #fff;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,.1);
    }
    canvas {
        max-width: 100%;
        margin-top: 15px;
        background: #eee;
        border-radius: 6px;
    }
    button {
        margin: 5px 5px 5px 0;
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        background: #007bff;
        color: #fff;
    }
    input[type='number'] {
        width: 80px;
        padding: 6px;
        border-radius: 6px;
        border: 1px solid #aaa;
    }
</style>
</head>

<body>

<h2>Canvas 图片旋转与下载示例</h2>

<div class="box">
    <input type="file" id="upload" accept="image/*">
    <br>

    <button onclick="rotate(90)">旋转 90°</button>
    <button onclick="rotate(180)">旋转 180°</button>
    <button onclick="rotate(270)">旋转 270°</button>

    <br>
    <input id="angleInput" type="number" value="45">
    <button onclick="rotateCustom()">自定义角度旋转</button>

    <br>
    <button onclick="downloadImage()">下载旋转后的图片</button>
</div>

<canvas id="canvas"></canvas>

<script>
    const upload = document.getElementById("upload");
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    let img = new Image();
    let currentAngle = 0;

    // 上传图片
    upload.onchange = function (e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (evt) {
                img.src = evt.target.result;
            };
            reader.readAsDataURL(file);
        }
    };

    // 图片加载完成后绘制
    img.onload = function () {
        drawImage();
    };

    // 绘制图片（带旋转）
    function drawImage() {
        const angleInRad = currentAngle * Math.PI / 180;

        // 旋转后图片的宽高重新计算
        const width = img.width;
        const height = img.height;

        // 旋转 90° / 270° 时宽高对调
        const cw = Math.abs(Math.cos(angleInRad)) * width + Math.abs(Math.sin(angleInRad)) * height;
        const ch = Math.abs(Math.sin(angleInRad)) * width + Math.abs(Math.cos(angleInRad)) * height;

        canvas.width = cw;
        canvas.height = ch;

        ctx.clearRect(0, 0, cw, ch);

        ctx.save();
        // 移动 canvas 原点到中心
        ctx.translate(cw / 2, ch / 2);
        // 旋转画布
        ctx.rotate(angleInRad);
        // 绘制图片（让图片中心对齐）
        ctx.drawImage(img, -width / 2, -height / 2);
        ctx.restore();
    }

    // 按钮旋转
    function rotate(angle) {
        currentAngle = (currentAngle + angle) % 360;
        drawImage();
    }

    // 自定义角度旋转
    function rotateCustom() {
        const angle = parseFloat(document.getElementById("angleInput").value) || 0;
        currentAngle = (currentAngle + angle) % 360;
        drawImage();
    }

    // 下载图片
    function downloadImage() {
        const link = document.createElement("a");
        link.download = "rotated_image.png";
        link.href = canvas.toDataURL("image/png");
        link.click();
    }
</script>

</body>
</html>

📌 功能点说明

功能已实现
上传图片✔
Canvas 绘图✔
自由旋转图片✔
图片宽高自适应✔
按钮旋转 90/180/270✔
自定义角度旋转✔
下载旋转后图片✔

只要告诉我需要哪个版本，我马上写给你！