Rotate & Flip
Rotate images by any angle and flip horizontally or vertically.
Rotate & Flip turns an image by quarter turns or mirrors it horizontally or vertically — "Rotate images by any angle and flip horizontally or vertically," as the card says. A live CSS preview updates the instant you change the Rotation (0°, 90°, 180°, 270°) or Flip (None, Horizontal, Vertical) selects, with a summary line like "{n}° rotation + horizontal flip" under the controls.
Nothing is baked until you click "Apply", which re-renders pixels on a canvas and reports "Result: {w}×{h}". The whole path is local: no upload, no AI, just Canvas 2D translate/rotate/scale transforms writing a new file you can download or discard with Start Over.
How it works
lib/imageRotate.ts draws the source with ctx.translate(center) + rotate(radians); when degrees % 180 !== 0 and % 90 === 0 (90° or 270°) the canvas width/height swap (needsSwap). flipImage instead uses ctx.scale(-1,1) or scale(1,-1) for the mirror.
Export writes image/png for PNG sources and image/jpeg at quality 0.92 otherwise, keeping the original filename. Important branch detail: when Flip is not None, handleRotate runs flipImage instead of rotateImage — flip replaces rotation rather than combining with it. Before Apply, the preview is CSS-only (rotate()/scaleX(-1)/scaleY(-1)).
How to use
- Drop a single image into the upload zone.
- Watch the live CSS preview reflect Rotation and Flip changes instantly.
- Choose Rotation: 0°, 90°, 180°, or 270°.
- Choose Flip: None, Horizontal, or Vertical.
- Read the summary line ("{n}° rotation" or "{n}° rotation + {horizontal|vertical} flip").
- Click "Apply" (label becomes "Processing...") — note flip takes precedence over rotate when set.
- Check "Result: {w}×{h}", then Download or click "Start Over".
Tips
- When Flip ≠ None the flip is applied alone — rotation in the same click is ignored (see the handleRotate branch).
- 90° and 270° swap width and height; 0° and 180° keep dimensions.
- Non-PNG inputs re-encode as JPEG 0.92 — fine for photos, but avoid it for transparency unless the source is PNG.
- The preview transform is CSS-only until Apply bakes real pixels — always Apply before downloading.
- "Error processing image." usually means a corrupt or undecodable file; re-export it and try again.
Rotate & Flip FAQ
Can I rotate by arbitrary angles like 45°?
No — the Rotation select offers only 0°, 90°, 180°, and 270°.
Do flip and rotate combine in one click?
No — if Flip is not None, flipImage runs instead of rotateImage; they are alternatives, not a stack.
Is EXIF orientation metadata preserved?
No — pixels are re-rendered on canvas; the original EXIF orientation tag is not carried through.
Is the image uploaded anywhere?
No — pure local canvas transforms with no network involved.
What quality is the output?
PNG sources stay PNG; everything else re-encodes as JPEG at quality 0.92.
Credits
- Canvas 2D API — In-browser rotate/flip transforms and export