Image Rotator 图像旋转工具
Image Rotator 可在浏览器内实现图像的无损旋转，支持90°、180°和270°的顺时针旋转，无需上传文件，保护您的隐私。
Image Rotator 是一款基于浏览器的图像旋转工具，使用 OffscreenCanvas 2D 变换技术，支持90°、180°和270°的顺时针旋转。该工具通过在客户端执行图像旋转处理，保证图像像素级无损旋转，避免了因多次压缩带来的质量损失。旋转操作中，90°和270°时画布尺寸会自动调整（宽高互换），确保图像完整显示。由于所有处理均在浏览器端完成，无需上传图片，极大保障了用户隐私。同时，您还可以结合使用 Flip Image 进行图像翻转或 Resize Image 调整图像尺寸，满足多样化需求。
如何使用 Image Rotator
- 点击“选择文件”按钮，加载您要旋转的图像（支持 JPEG、PNG 等常见格式）。
- 选择旋转角度：90°、180°或270°顺时针。
- 点击“旋转”按钮，等待浏览器完成图像处理。
- 浏览器会显示旋转前后的预览，方便对比效果。
- 满意后，点击“下载”按钮保存旋转后的图像，支持 JPEG 和 PNG 格式导出。
技术原理解析
Image Rotator 利用 HTML5 的 OffscreenCanvas 和 Canvas 2D API 实现图像旋转。旋转过程先将画布原点平移到中心位置（ctx.translate(center)），然后应用旋转矩阵（ctx.rotate以弧度为单位），最后以负半宽高偏移绘制图像（ctx.drawImage(bitmap, -w/2, -h/2)）。
对于90°和270°的旋转，画布宽度和高度会互换，确保旋转后的图像尺寸正确无误。此方法保证了旋转操作是像素级的无损变换，没有重新采样或多次编码带来的质量劣化。仅在导出时，JPEG或PNG编码步骤会影响最终文件大小和质量。
示例
输入: 一张 800x600 像素的 PNG 图片，选择旋转角度 90°顺时针。
处理后: 输出一张 600x800 像素的 PNG 图片，内容顺时针旋转90°，无压缩伪影。
适用场景
- 前端开发者需要快速调整素材方向，确保 UI 设计一致。
- 设计师在处理图像时需旋转图片以适配不同布局。
- SEO 专家调整图像方向以优化页面展示和加载速度。
- 学生和教育工作者快速旋转拍摄的文档或照片。
您也可以结合使用 Crop Image 裁剪旋转后的图像，或通过 Watermark Image 添加水印，满足更多图像编辑需求。
常见问题
Image Rotator 支持哪些图像格式？
该工具支持常见的 JPEG 和 PNG 格式。处理全在浏览器端完成，利用 OffscreenCanvas 对图像进行无损旋转。
旋转图片会导致质量损失吗？
旋转过程中不进行像素重采样，使用 ctx.translate 和 ctx.rotate 实现无损变换。只有导出时的 JPEG/PNG 编码会影响最终质量。
为什么90°或270°旋转后图像尺寸会变化？
90°和270°旋转是正交旋转，宽度和高度互换，所以画布尺寸会自动调整，确保图像内容完整且不裁剪。
图像处理会上传到服务器吗？
所有处理均在浏览器端执行，图片不会上传任何服务器，保障用户隐私和数据安全。
Image Rotator 能否与其他图像编辑工具配合使用？
可以。您可以先使用 Resize Image 调整图像大小，旋转后再用 Crop Image 裁剪，或通过 Watermark Image 添加水印。