图片旋转

90/180/270/任意角度

411 次访问
IMAGE ROTATE

图片旋转

90/180/270 度 / 任意角度 · 自动调整画布

🔄

拖入或点击选择图片

关于本工具

了解工具定位 · 使用场景 · 对比优势

选择预设的 90°/180°/270° 或输入任意角度,即可旋转图片。电商处理商品图、设计师调整素材方向、摄影师校正水平线,无需安装软件。图片处理全程在浏览器本地完成,不上传任何数据。

使用场景

📱

手机照片校正

手机拍摄时经常因为手持角度偏差产生歪斜照片,尤其拍文档、白板、建筑时,歪斜的图片影响阅读和打印效果。使用本工具,上传照片后选择 90°/180°/270° 或手动输入任意角度,一键旋转至水平,无需专业修图软件,浏览器内直接完成,照片保持原始画质。

🖼️

电商图片批量处理

电商运营者从不同供应商获取的商品图方向不一,有的横拍、有的竖拍,上架前需要统一方向。本工具支持 90/180/270 度快速旋转,无需打开 Photoshop 逐张调整,在网页中即可批量旋转图片,节省大量重复操作时间。

🎨

设计素材方向调整

设计师从素材库下载的图标、纹理、背景图方向可能与当前版面不匹配,需要旋转 15° 或 45° 等非标准角度来适配构图。本工具支持任意角度(0-360°)精确旋转,输入具体度数即可微调,旋转后图片边缘自动补白,保持完整画布。

📄

扫描文档方向修正

办公人员使用扫描仪或多功能一体机扫描文件时,偶尔因进纸方向错误导致生成的 PDF 或图片颠倒(180° 旋转)。使用本工具,上传扫描件后点击一次 180° 旋转即可恢复正向,无需重新扫描,尤其适合批量处理多页合同或发票。

🔧

维修图纸方向查看

维修工程师在手机或平板上查看设备电路图、零件分解图时,原图方向可能与当前设备摆放方向不一致,频繁扭头查看影响效率。使用本工具将图纸旋转 90° 或 270° 至与实物方向一致,边看边操作,减少误判。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (imageresizer.com)传统方法 (Photoshop / GIMP)
数据隐私纯浏览器处理,文件不上传服务器上传文件到云端处理本地软件处理,不涉及网络传输
处理速度1 秒内完成,即时预览取决于文件大小和网络,通常 3-10 秒打开软件、导入、旋转、导出,至少 1-2 分钟
操作步骤进入页面 → 选择图片 → 点击旋转 → 下载进入页面 → 上传 → 等待处理 → 下载打开软件 → 创建/打开文件 → 选择旋转工具 → 设置角度 → 导出
离线可用完全离线,加载后断网也可用必须联网完全离线
批量处理单张处理支持批量上传和旋转可通过动作/脚本批量处理
文件大小限制无限制(取决于浏览器内存)通常有 20-50MB 限制无限制
收费完全免费,无水印免费版有水印,去水印需付费正版软件需付费购买

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 点击「选择图片」按钮,或拖拽图片到虚线区域上传(支持 JPG/PNG/WebP)
  2. 在「旋转角度」下拉框中选择 90°、180°、270° 或输入任意角度值
  3. 点击「旋转」按钮,预览区即时显示旋转后的图片效果
  4. 点击「下载」按钮保存旋转后的图片到本地

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
上传一张 1920×1080 的 JPG 图片,选择 90° 旋转输出一张 1080×1920 的 JPG 图片,顺时针旋转 90°典型场景:将横屏照片转为竖屏
上传一张 800×600 的 PNG 图片,选择 180° 旋转输出一张 800×600 的 PNG 图片,上下颠倒典型场景:修正倒置的扫描件或自拍
上传一张 4000×3000 的 HEIC 图片,选择 270° 旋转输出一张 3000×4000 的 HEIC 图片,逆时针旋转 90°典型场景:iPhone 拍摄的 HEIC 格式照片
上传一张 100×100 的正方形 GIF 动图,选择 45° 任意角度输出一张 100×100 的 GIF 动图,内容旋转 45°,画布自动裁剪为正方形边界 case:正方形图片与动图格式同时处理
上传一张 1×1 像素的 BMP 图片,选择 90° 旋转输出一张 1×1 像素的 BMP 图片,内容不变边界 case:极低分辨率图片(1×1 像素)
上传一张 50000×50000 像素的 TIFF 图片,选择 180° 旋转输出一张 50000×50000 像素的 TIFF 图片,浏览器可能因内存不足卡顿边界 case:超大分辨率图片(接近浏览器处理上限)
上传一张带透明通道的 500×500 PNG 图片,选择 90° 旋转输出一张 500×500 的 PNG 图片,透明通道保留,内容旋转 90°易错 case:用户担心旋转会丢失透明背景
上传一张 300×400 的 WebP 图片,选择 0°(不旋转)输出原图,无任何变化易错 case:用户误以为需要点击旋转按钮才能下载

常见错误对照9 个常踩的坑 · 错误 → 修复

1. 上传了非图片文件(如 PDF、Word)

错误
上传一个 .pdf 或 .docx 文件到工具
修复
上传 .jpg、.png、.webp、.gif、.bmp 等标准图片格式

浏览器 File API 的 createImageBitmap 只支持图片 MIME 类型;非图片文件会触发 DOMException 或静默失败,无输出

2. 使用 0° 或 360° 旋转(无意义操作)

错误
输入角度 0 或 360,期望得到不同结果
修复
需要旋转时输入 90 / 180 / 270;不需要旋转时直接下载原图

0° 和 360° 旋转输出与输入完全一致,徒增一次浏览器重绘开销(Canvas 渲染 + 编码),无实际用途

3. 输入负角度(如 -90)

错误
在角度输入框填写 -90
修复
输入 270(等价于 -90 的顺时针旋转),或使用 90 / 180 / 270 预设按钮

Canvas 的 rotate() 接受弧度,但本工具只处理 0-360 正整数;负角度会被 Math.abs 或取模处理,结果可能非预期

4. 输入非整数角度(如 45.5)

错误
输入 45.5° 或 90.3°
修复
输入 45 或 90 等整数角度

工具预设按钮只覆盖 90 的倍数,手动输入框若未做浮点校验,45.5 会被 parseInt 截断为 45,丢失精度

5. 旋转后图片被裁剪(未理解 Canvas 边界)

错误
旋转 45° 后图片四角被切掉,以为是工具 bug
修复
使用 90/180/270 预设按钮(不会裁剪),或手动输入角度前确认工具是否提供「自适应画布」选项

Canvas 默认画布尺寸固定,旋转非直角角度时原图超出画布边界会被裁剪;本工具仅支持 90 倍数旋转,不会出现此问题

6. 上传超大图片导致浏览器崩溃

错误
上传 8000×6000 像素的 RAW 转存 JPG(约 20MB)
修复
上传前用本地软件压缩至 4000px 以内,或使用 WebP 格式减小体积

Canvas 操作在浏览器主线程执行,超大图片解码 + 旋转 + 编码会占用数百 MB 内存,低端设备可能 OOM 或标签页崩溃

7. 期望旋转后 EXIF 方向自动修正

错误
旋转一张手机竖拍照片(EXIF Orientation=6),输出仍是横图
修复
旋转前先用 EXIF 查看工具确认 Orientation 值,或使用支持 EXIF 修正的图片编辑器

本工具仅做像素级旋转,不读取/写入 EXIF 元数据;Orientation 标签不会被改写,浏览器显示可能仍依赖 EXIF 方向

8. 旋转后下载格式与上传格式不一致

错误
上传 PNG 透明图,旋转后下载为 JPG(白色背景填充透明区域)
修复
上传 PNG 时确认输出格式也为 PNG,或接受 JPG 会丢失透明通道

Canvas.toBlob() 默认输出格式由工具指定,若固定为 image/jpeg,PNG 的 alpha 通道会被丢弃,透明区域变白

9. 用旋转工具替代镜像翻转

错误
输入 180° 试图实现水平镜像(左右颠倒)
修复
使用专门的「镜像翻转」工具,或 CSS transform: scaleX(-1)

旋转 180° 是上下+左右同时颠倒,与镜像翻转(仅水平或垂直翻转)不同;两者视觉结果完全不同

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

x' = x cos θ - y sin θ, y' = x sin θ + y cos θ

变量说明

  • x, y — 原始像素坐标(整数)
  • x', y' — 旋转后像素坐标(浮点)
  • θ — 旋转角度(弧度,逆时针为正)

示例

对 100×200 图片逆时针旋转 30°(θ=π/6≈0.5236)。取中心点附近像素 (50, 80):x'=50×0.8660 - 80×0.5≈43.3 - 40=3.3,y'=50×0.5 + 80×0.8660≈25 + 69.28=94.28。新坐标 (3.3, 94.28) 需经双线性插值取整到 (3, 94)。

适用范围

适用于任意角度(0°~360°)的二维图像旋转,基于标准旋转矩阵。90°/180°/270° 为特例(cos/sin 为 0 或 ±1),无需插值。不适用于三维旋转或非欧几里得空间变换。

原理图

选择角度Canvas 旋转下载图片90° / 180° / 270°或任意角度纯浏览器端处理图片不上传服务器保持原图质量支持 PNG / JPEG
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

from PIL import Image

# 打开图片
img = Image.open("input.jpg")

# 旋转 90 度(逆时针)
rotated = img.rotate(90, expand=True)
rotated.save("rotated_90.jpg")

# 旋转任意角度(45 度,不裁剪)
rotated_any = img.rotate(45, expand=True, fillcolor=(255, 255, 255))
rotated_any.save("rotated_45.jpg")

# 旋转 180 度(使用 transpose 更快)
rotated_180 = img.transpose(Image.ROTATE_180)
rotated_180.save("rotated_180.jpg")
package main

import (
	"image"
	"image/jpeg"
	"image/png"
	"log"
	"os"
	"golang.org/x/image/draw"
)

func rotate90(src image.Image) *image.NRGBA {
	// 创建旋转后的画布(宽高互换)
	dst := image.NewNRGBA(image.Rect(0, 0, src.Bounds().Dy(), src.Bounds().Dx()))
	for y := 0; y < src.Bounds().Dy(); y++ {
		for x := 0; x < src.Bounds().Dx(); x++ {
			dst.Set(src.Bounds().Dy()-1-y, x, src.At(x, y))
		}
	}
	return dst
}

func main() {
	file, err := os.Open("input.jpg")
	if err != nil {
		log.Fatal(err)
	}
	defer file.Close()

	src, _, err := image.Decode(file)
	if err != nil {
		log.Fatal(err)
	}

	rotated := rotate90(src)

	out, _ := os.Create("rotated.jpg")
	defer out.Close()
	jpeg.Encode(out, rotated, &jpeg.Options{Quality: 95})
}
const sharp = require('sharp');

// 旋转 90 度并保存
sharp('input.jpg')
  .rotate(90)
  .toFile('rotated_90.jpg')
  .catch(err => console.error('旋转失败:', err));

// 旋转任意角度(45 度,背景白色)
sharp('input.jpg')
  .rotate(45, { background: { r: 255, g: 255, b: 255, alpha: 1 } })
  .toFile('rotated_45.jpg')
  .catch(err => console.error('旋转失败:', err));

// 使用 canvas API(浏览器环境)
const img = new Image();
img.onload = () => {
  const canvas = document.createElement('canvas');
  canvas.width = img.naturalHeight;
  canvas.height = img.naturalWidth;
  const ctx = canvas.getContext('2d');
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(Math.PI / 2);
  ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
  canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob);
    console.log('旋转后的图片 URL:', url);
  });
};
img.src = 'input.jpg';

常见问题

9 个高频疑问

怎么让图片只旋转 45 度?
旋转角度输入框支持任意数值,包括 45、90.5、-30 等。直接输入数字后点击旋转按钮即可。如果图片旋转后出现黑边,是因为图片本身是矩形,旋转后需要更大的画布才能完整显示,这是正常的。可以手动裁剪掉黑边,或者旋转前先勾选「自动裁剪」选项(如果工具有提供)。注意:输入负值可以逆时针旋转。
为什么旋转后的图片变模糊了?
纯浏览器旋转时,浏览器会对图片进行重新采样(resampling),这个过程会损失部分细节,尤其多次旋转或旋转非 90 度倍数角度时更明显。如果原始图片分辨率较低(如 800x600 以下),模糊感会更突出。解决办法:尽量用 90、180、270 度这类整数倍旋转(不涉及重采样),或者旋转前先用其他工具将图片放大到更高分辨率再操作。本工具是纯前端处理,不压缩原图质量,模糊是浏览器渲染机制导致的。
旋转后图片尺寸变了,是工具出问题了吗?
不是。图片旋转 90 度或 270 度时,宽高会互换——横向图片变竖向,竖向图片变横向,这是几何上的必然结果。旋转非直角角度(如 45 度)时,画布会扩大以容纳旋转后的图片,导致总像素增加,但图片本身内容没有缩放。如果希望保持原始宽高比,可以先裁剪为正方形再旋转,或者旋转后手动裁剪。本工具不自动缩放图片,尺寸变化是旋转操作的自然结果。
图片旋转 180 度后文字变成倒的了,能调回来吗?
再旋转 180 度即可恢复原状。如果图片本身包含文字且需要保持正向,建议先用本工具旋转到正确角度(90/180/270 度),再使用图片编辑软件的水平翻转或垂直翻转功能调整方向。注意:旋转 180 度等同于两次 90 度旋转,文字上下颠倒但左右关系不变,而水平翻转会让文字镜像显示,两者效果不同。本工具暂不支持翻转,需配合其他工具使用。
这个工具能旋转手机拍的竖屏照片吗?
可以。手机竖屏拍摄的照片(宽 < 高)在电脑上打开时通常会横过来显示,因为图片的 EXIF 方向信息可能不被浏览器正确读取。使用本工具时,先上传图片,如果显示方向不对,直接旋转 90 度或 270 度即可校正。如果图片本身已经包含 EXIF 旋转标记,本工具不会自动读取它(纯前端处理),但手动旋转后保存的图片会写入新的方向信息,在手机或电脑上都能正常显示。
旋转后图片格式会变吗?支持 PNG 透明背景吗?
本工具保持原格式输出:JPEG 转出 JPEG,PNG 转出 PNG,GIF 转出 GIF。PNG 图片的透明背景在旋转后仍然保留,不会变成白色或黑色。但注意:如果原始 PNG 图片本身包含半透明区域(如羽化边缘),旋转非 90 度倍数角度时,浏览器会对像素进行插值,半透明边缘可能会变得粗糙或出现锯齿,这是浏览器渲染的局限,建议旋转后手动用图片编辑工具优化边缘。
旋转图片时浏览器卡死了,怎么办?
卡死通常是因为图片太大(如 4000x6000 像素以上)或内存不足。本工具是纯浏览器处理,大图片会占用大量内存,低端设备或同时打开多个标签页时容易卡顿。解决办法:1) 先用其他工具将图片缩小到 2000 像素以内再上传;2) 关闭其他浏览器标签页释放内存;3) 换用 Chrome 或 Edge 浏览器(对内存管理更好);4) 如果经常处理大图,建议使用桌面端图片编辑软件。本工具本身不限制文件大小,但受限于浏览器性能。
旋转后图片颜色变了,偏色了怎么办?
纯浏览器旋转不会改变图片的色彩空间或颜色值,偏色可能是浏览器显示差异导致的(不同浏览器对色彩管理不同),或者原始图片包含 ICC 色彩配置文件而浏览器未正确解析。可以尝试:1) 用系统自带的图片查看器打开旋转后的图片,对比颜色是否一致;2) 如果偏色明显,将图片转换为 sRGB 色彩空间后再上传旋转;3) 检查是否开启了浏览器的「色彩校正」或「高对比度」模式,这些设置会影响显示效果。本工具不修改图片像素数据,偏色问题基本是显示环境造成的。
旋转 90 度后图片上下颠倒,但左右是对的,这是怎么回事?
旋转 90 度只会改变方向,不会导致上下颠倒。如果出现这种情况,说明原始图片本身可能已经包含 EXIF 方向标记(如手机拍摄时),而浏览器没有正确读取该标记。解决方法:先用本工具旋转 90 度,如果效果不对,再尝试旋转 270 度(相当于反向 90 度),或者旋转 180 度两次来校正。如果多次尝试仍不对,可以使用图片编辑软件查看并重置 EXIF 方向信息后再旋转。本工具不处理 EXIF,仅按输入角度旋转像素。
选择 打开 +新窗口 esc关闭