图片旋转器，免费

90/180/270度与任意角度：无损旋转的界限

图像旋转有两种截然不同的类型。恰好旋转90°、180° 或 270°是无损的：每个源像素恰好落在一个整数目标像素上，位图经过排列而非重新计算，没有插值、没有混合、没有任何质量损失。90°顺时针旋转将W × H图像中的像素 (x, y) 映射到新的H × W输出中的位置 (H − 1 − y, x)。180°旋转将 (x, y) 映射到 (W − 1 − x, H − 1 − y)。这些都是纯内存重排操作。

任何其他角度都需要重采样：对于每个目标像素，算法计算它在源图像中应来自何处（通过逆旋转），发现源位置通常是小数，然后使用插值核合并周围的源像素。常见的插值核：

• 最近邻：选取最近的单个源像素。快速，保留硬边缘，但在旋转后的线条上产生可见的「锯齿」。
• 双线性：对最近的四个源像素进行加权平均。平滑、快速，是大多数浏览器canvas实现的默认选项。
• 双三次：使用平滑三次核对最近的16个源像素进行加权平均。比双线性更清晰；是Photoshop双三次选项的默认值。
• Lanczos：在6×6或8×8邻域上使用加窗sinc函数。是常用中质量最高的核；显著较慢；在锐利边缘上可能产生振铃伪影。

每种核在细节保留与振铃或模糊之间进行权衡，它们都有一个共同的真相：任何非90度旋转都会丢弃部分源信息。精细的高频细节（单像素线条、亚像素定位的文字边缘、干净锯齿化的像素艺术）无法在经过任何核的30°或45°旋转后不出现软化。直观理解：旋转1°再旋转回 −1°，您得到的不是原图，而是更模糊的副本。旋转90°再旋转 −90°则能得到完全相同的原始位图。

EXIF方向标签：照片侧转的隐藏原因

「浏览器显示我的照片上下颠倒」这个问题有一个具体原因。现代智能手机拍照时不会在您侧握手机时物理旋转图像，而是存储原始传感器方向并添加一个EXIF方向标签（由JEIDA于1995年前后引入），告知查看者应如何显示图像。该标签有8个可能的值：1=正常、3=180°、6=90°顺时针、8=90°逆时针，加上四个镜像变体。

大约在2010年之前，设备写入旋转后的像素且方向值为1；之后，现代手机改为存储原始像素并设置方向标签，从而节省存储和电池。问题在于：浏览器历史上不尊重 <img> 元素之外的EXIF方向。将竖拍手机照片拖入基于canvas的工具时，除非工具明确读取并应用方向标签，否则canvas会将其绘制成侧向。2017年添加的CSS image-orientation 属性解决了HTML中的此问题；现代 createImageBitmap()（带有 imageOrientation: 'from-image'）解决了canvas中的问题。Chrome 81（2020年4月）将 image-orientation: from-image 设为 <img> 元素的默认值。

如果您曾经在浏览器中旋转过一张照片，它看起来「已经旋转」，或者旋转了两次：您就遇到了这个问题。正确的修复方法是：旋转工具先读取EXIF标签，先在脑中应用该方向，然后再叠加用户选择的旋转。

canvas的工作原理

Canvas的 rotate(angle) 方法将坐标系绕canvas原点（0, 0）旋转。由于原点是左上角，直接调用 ctx.rotate(angle) 后跟 ctx.drawImage(img, 0, 0) 会将图像绕其左上角旋转，将大部分旋转后的像素发送到canvas外的左上方。标准方法通过平移-旋转-平移三明治来纠正此问题：

ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * Math.PI / 180);   // canvas takes radians
ctx.translate(-image.width / 2, -image.height / 2);
ctx.drawImage(image, 0, 0);
ctx.restore();

对于90/180/270旋转，目标canvas需要调整大小以容纳交换后（90/270）或原始（180）的尺寸。对于任意角度，旋转图像的边界矩形大于任一源尺寸；对于旋转角度为θ的W × H图像，新的边界框宽为 |W·cos(θ)| + |H·sin(θ)|，高为 |W·sin(θ)| + |H·cos(θ)|。因此，旋转45°的1000 × 800图像需要约1273 × 1273的canvas来容纳所有旋转后的像素。「裁剪适配」开关决定是否扩展canvas（保留每个像素，角落为透明或白色三角形）或裁剪回原始尺寸（裁剪旋转后的内容）。

PNG与JPG输出：角落问题

当非90度旋转扩展了canvas时，四个三角形角落需要填充某些内容。PNG可以将这些空隙渲染为完全透明的像素（alpha = 0），非常适合将旋转后的图像叠加在另一个背景上。JPG没有alpha通道，会将任何未填充的像素渲染为canvas的清除颜色，JPEG将其压平为不透明黑色。用户下载旋转照片的JPG后被角落的黑色楔形惊到，正是遇到了这个问题。

本工具在编码前将JPG输出合成到白色背景上，以避免黑角问题。PNG输出保留透明度。格式选择：PNG用于含透明度或需要进一步编辑的内容；JPG用于文件大小重要的最终目标照片。

JPG还有一个细节。无损JPEG旋转在技术上是可能的：jpegtran 工具重新排列JPEG块边界（8×8 DCT系数块），无需重新解码图像，因此90/180/270旋转可以保持底层压缩数据完整，并生成质量与原始文件完全相同的JPEG。问题在于iMCU边缘约束：图像尺寸必须是块大小的倍数，否则旋转要么裁剪几个边缘像素，要么留下一个不完整的块。本页使用canvas API而非jpegtran式块操作，因此这里的JPG输出总是以最高质量重新编码，但带有任何JPEG重新编码固有的微小代际损失。

何时会用到浏览器旋转工具

• 侧向导入桌面应用的智能手机照片，这些应用不尊重EXIF方向。
• 扫描文档，因为扫描仪的自动检测出错而以90°旋转进入。
• 打印方向：准备竖版与横版打印的图像。
• 艺术与设计构图：旋转照片以测试不同的视觉方向。
• 社交媒体上传前的快速修复，当平台的自动旋转出现混乱时。
• 敏感内容：工作文件、证件照、家庭照片，您宁愿不上传到第三方服务的内容。

更多问题

90°旋转会损失照片质量吗？

不会，旋转步骤本身不会，90/180/270旋转是无损排列。质量风险来自编码器。如果您上传JPEG，本工具会解码它、旋转像素数组，然后重新编码结果。重新编码会增加少量代际损失（在最高质量下通常不可见），因为JPEG是有损的。要避免这种情况，请下载为PNG，或使用专用工具如 jpegtran 来重新排列DCT块而无需重新解码。

为何旋转SVG能保持图像清晰？

SVG是矢量的，它将形状存储为数学路径而非像素网格。通过 transform="rotate(angle)" 旋转SVG只是修改路径坐标；没有重采样步骤，在任何角度都没有质量损失。浏览器每次重绘时重新光栅化旋转后的路径，始终以当前缩放级别。本工具处理光栅图像（PNG、JPG、WebP），因此会遇到重采样成本；SVG最好通过直接编辑 transform 属性或使用Inkscape或Illustrator等矢量编辑器来旋转。

为何角落是白色而非透明？

您下载的是JPG输出。JPG没有alpha通道，因此非90度旋转留下的三角形空隙在编码前会填充为白色（或黑色，在没有合成到背景上的工具中，这是常见的黑角惊喜）。切换到PNG下载，角落将正确显示为透明。

我可以以1°为步长旋转吗？

可以。上方滑块以1°为步长移动；输入框接受任何小数（45.5°完全可以）。对于非常精确的对齐工作（例如校正照片中倾斜的地平线），亚度精度可能很重要。每次非90度旋转都会损失少量质量，因此对于反复微调，请考虑一次性旋转到最终目标角度，而非进行多次增量调整。

有任何内容会发送到服务器吗？

不会。图像由您的浏览器解码，通过Canvas 2D API绘制到canvas，并重新编码以供下载，全程在您的浏览器进程中完成。文件从不离开您的设备。该工具在页面加载后也可离线工作。