🔄 图片旋转翻转工具

在线免费旋转和翻转图片，支持90度步进、任意角度旋转、水平/垂直翻转，纯前端本地处理，数据不上传。

🔄

点击或拖拽上传图片

支持 JPG、PNG、WebP 等格式

什么是图片旋转翻转工具？

图片旋转翻转工具是DevToolBox推出的一款在线图片处理工具，用于对图片进行旋转和翻转操作。支持90度步进旋转、任意角度旋转、水平翻转（镜像）、垂直翻转等功能，操作简单直观。本工具基于HTML5 Canvas API纯前端实现，所有处理都在您的浏览器本地完成，图片数据不会上传到任何服务器，确保您的图片内容和隐私安全。

图片旋转和翻转是最基础的图片处理操作之一。用手机拍照时，由于握持方向不同，照片可能会出现旋转或颠倒的情况；扫描文档时，纸张可能放歪了需要矫正；制作设计稿时，可能需要将素材水平或垂直翻转。这些操作虽然简单，但如果没有合适的工具也会很麻烦。本工具提供了完全免费、开箱即用的在线解决方案。

如何使用图片旋转翻转工具

上传图片 — 点击上传区域或拖拽图片到上传框中。支持JPG、PNG、WebP、BMP等常见图片格式。
旋转或翻转 — 使用快捷按钮进行90度左旋/右旋，或水平/垂直翻转。也可以输入任意角度进行精确旋转，支持-360°到360°。
调整背景色 — 进行非90度倍数的旋转时，图片边缘会出现空白区域，可以设置背景颜色填充这些区域。默认白色背景。
下载结果 — 点击"下载图片"按钮，工具会在本地生成旋转/翻转后的图片并自动下载。

常见使用场景

场景一：修正手机照片方向

用手机拍照后，照片方向可能不对（横拍显示成竖的或反之）。使用90度旋转功能，一键将照片转到正确方向，便于查看和分享。

场景二：扫描文档矫正

扫描或拍照的文档可能有轻微倾斜，使用任意角度旋转功能进行微调，将文档矫正到水平位置，提高可读性和专业感。

场景三：制作镜像效果

将图片水平翻转产生镜像效果，可用于制作对称图案、修正自拍镜像、创建倒影效果等设计场景。垂直翻转则可以制作上下颠倒的趣味效果。

场景四：批量调整图片方向

有一批图片方向不一致时，逐个打开编辑软件调整很麻烦。使用本工具可以快速处理，上传一张调一张，效率很高。

技术原理

本工具使用HTML5 Canvas API在浏览器中实现图片旋转和翻转。核心是Canvas的transform变换方法：rotate()用于旋转，scale()用于翻转（缩放-1即产生镜像效果）。旋转时需要注意Canvas尺寸的变化，因为旋转后图片的外接矩形大小会改变。

// 图片旋转核心逻辑（基于 Canvas API）
function rotateImage(image, degrees, bgColor) {
  const rad = degrees * Math.PI / 180;
  const cos = Math.abs(Math.cos(rad));
  const sin = Math.abs(Math.sin(rad));
  const newWidth = image.width * cos + image.height * sin;
  const newHeight = image.width * sin + image.height * cos;
  
  const canvas = document.createElement('canvas');
  canvas.width = newWidth;
  canvas.height = newHeight;
  const ctx = canvas.getContext('2d');
  
  // 填充背景色
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, newWidth, newHeight);
  
  // 旋转并绘制图片（居中）
  ctx.translate(newWidth / 2, newHeight / 2);
  ctx.rotate(rad);
  ctx.drawImage(image, -image.width / 2, -image.height / 2);
  
  return canvas.toDataURL('image/png');
}

// 水平翻转
function flipImageHorizontal(image) {
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d');
  ctx.translate(image.width, 0);
  ctx.scale(-1, 1);
  ctx.drawImage(image, 0, 0);
  return canvas.toDataURL('image/png');
}

90度倍数的旋转是无损操作（不改变像素质量），因为只是将像素重新排列，不需要插值计算。非90度的任意角度旋转则需要进行插值，可能会有轻微的质量损失。翻转操作也是无损的，只是像素的水平或垂直镜像排列。

旋转 vs 翻转区别

操作	效果	是否可逆	像素质量
旋转90°	顺时针/逆时针转90度	旋转4次复原	无损
旋转180°	上下左右都颠倒	旋转2次复原	无损
任意角度旋转	按指定角度旋转，边缘填充背景	反向旋转可近似复原	有轻微损失
水平翻转	左右镜像	翻转2次复原	无损
垂直翻转	上下镜像	翻转2次复原	无损