🔄 图片旋转工具

什么是图片旋转？

图片旋转是指将图片按照一定的角度进行旋转调整的操作，包括固定角度旋转（90度、180度、270度）、任意角度旋转，以及水平翻转、垂直翻转（镜像）等。旋转是最基础的图片编辑操作之一，常用于纠正照片方向、调整构图、制作镜像效果等。本工具完全在浏览器本地运行。

图片旋转的常见应用场景

1. 纠正照片方向

用手机拍摄照片时，如果手机方向传感器不准确，或者照片的EXIF方向信息丢失，导入电脑后可能会出现方向不对的情况（横拍的照片显示为纵向）。使用旋转工具可以快速将照片调整到正确的方向，保证正常浏览和使用。这是最常见的旋转使用场景。

2. 调整构图角度

拍照时可能因为手抖或环境限制，导致照片中的水平线或垂直线倾斜。通过轻微旋转图片（±5度以内），可以校正倾斜的画面，让地平线或建筑边缘恢复水平/垂直，照片看起来更端正专业。这种微调在风景照和建筑摄影中经常用到。

3. 制作镜像效果

水平翻转或垂直翻转可以制作镜像对称效果，常用于创意摄影、设计素材制作、表情包制作等场景。比如将一张左右对称的脸照片翻转后拼接，可以观察面部对称性；或者将文字翻转后制作印章效果、水中倒影效果等。

4. 适应不同显示需求

不同的使用场景需要不同方向的图片：手机壁纸需要竖版、电脑壁纸需要横版、PPT配图可能需要特定方向。通过旋转可以快速改变图片方向，适应不同的显示需求。比如将横拍的风景照旋转90度用作手机壁纸。

如何使用图片旋转工具

1. 上传图片 — 点击拖拽区域或直接将图片拖入，支持批量上传多张图片。
2. 旋转/翻转 — 点击快速旋转按钮（左/右90度、180度）或拖动滑块调整任意角度，也可以水平/垂直翻转。
3. 调整参数 — 选择输出格式和质量，非直角旋转时可设置背景颜色。
4. 下载图片 — 点击下载保存处理后的图片，批量上传的可以批量下载。

为什么选择本工具？

• 纯前端处理：基于Canvas API实现，所有操作在浏览器本地完成，图片不上传服务器。
• 多种旋转方式：支持90度/180度/270度快速旋转、任意角度旋转、水平/垂直翻转。
• 批量处理：支持一次上传多张图片，逐一处理后批量下载。
• 背景颜色可调：非直角旋转产生的空白区域可自定义背景颜色。
• 多种格式：支持PNG、JPEG、WebP三种输出格式，质量可调。
• 完全免费：无使用次数限制，无需注册。

技术原理

图片旋转的核心是Canvas API的transform变换。Canvas提供了rotate()、scale()、translate()等变换方法，可以对绘制的图像进行几何变换。旋转的基本原理是：(1) 创建一个新的Canvas，尺寸根据旋转角度计算；(2) 将Canvas的坐标原点平移到中心；(3) 调用rotate()方法旋转坐标系；(4) 将图片绘制到旋转后的坐标系中；(5) 导出旋转后的图片。

对于90度的整数倍旋转，可以直接交换宽高，不会有像素损失和锯齿。对于任意角度的旋转，旋转后的图片尺寸会变大（比原图大），因为需要容纳旋转后四个角的位置，边角会产生空白三角形区域，需要用背景色填充。水平翻转实际上是scale(-1, 1)的缩放变换，垂直翻转是scale(1, -1)。

// 图片旋转核心代码
function rotateImage(sourceImg, angle, bgColor) {
  const rad = angle * Math.PI / 180;
  const sin = Math.abs(Math.sin(rad));
  const cos = Math.abs(Math.cos(rad));
  // 计算旋转后画布尺寸
  const newW = sourceImg.width * cos + sourceImg.height * sin;
  const newH = sourceImg.width * sin + sourceImg.height * cos;
  
  const canvas = document.createElement('canvas');
  canvas.width = newW;
  canvas.height = newH;
  const ctx = canvas.getContext('2d');
  
  // 填充背景色
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, newW, newH);
  
  // 平移到中心并旋转
  ctx.translate(newW / 2, newH / 2);
  ctx.rotate(rad);
  ctx.drawImage(sourceImg, -sourceImg.width / 2, -sourceImg.height / 2);
  
  return canvas.toDataURL('image/jpeg', 0.8);
}

旋转注意事项

• 90度旋转无损：90度整数倍的旋转只是像素位置的重新排列，没有质量损失。
• 任意角度有损：非90度整数倍的旋转涉及像素插值，会有轻微的质量损失，角度越接近90度倍数损失越小。
• 多次旋转：避免对同一张图片进行多次非90度旋转，每次旋转都会引入质量损失。最好在原始图片上一次完成。
• 背景透明：如果选择PNG格式并设置透明背景，旋转后的边角区域是透明的；JPEG格式不支持透明，会显示设置的背景色。