Canvas 图片旋转工具 Demo

本页面展示了一个基于 Canvas 的图片旋转工具，你可以上传图片并通过按钮进行顺时针、逆时针、自定义角度旋转以及重置操作。

功能说明

• 上传图片：点击上传按钮选择本地图片，显示在 Canvas 上
• 顺时针旋转：顺时针旋转指定角度
• 逆时针旋转：逆时针旋转指定角度
• 自定义角度：输入任意旋转角度进行旋转
• 旋转 180°：快速旋转 180°
• 重置：回到原始图片状态

使用步骤

1. 点击 上传图片 按钮，选择需要旋转的图片
2. 图片上传后，Canvas 上会显示图片
3. 点击各旋转按钮完成相应操作
4. 使用 重置 按钮可以回到原始图片状态
5. 可以通过 自定义角度 输入框输入任意角度进行旋转

Demo

图片旋转工具

技术实现

• 工具类：CanvasRotationHelper 封装了旋转算法，Vue 组件只负责状态管理和 Canvas 渲染
• Vue3 + Composition API：使用 ref 管理 Canvas 和图片状态
• 按钮事件：点击按钮调用 CanvasRotationHelper.rotateCanvas 实现旋转
• VitePress 展示：Demo 组件自包含，Markdown 页面直接引用

注意事项

• Canvas 显示大小会根据图片尺寸自动调整
• 支持常见图片格式（jpg、png）
• 如果使用大图片，旋转操作可能稍有延迟