Image Flip/Rotate
Free web tool: Image Flip/Rotate
Drop a file here, or
Choose fileJPG, PNG, WebP image files (max 50MB)
About Image Flip/Rotate
The Image Flip & Rotate tool lets you rotate images by 90, 180, or 270 degrees and flip them horizontally or vertically, all directly in your browser. It uses the HTML5 Canvas API with ctx.rotate() and ctx.scale() transformations to apply precise geometric operations without any server upload or quality loss.
The tool accepts JPG, PNG, and WebP images up to 50MB via drag-and-drop or file picker. Rotation is computed using radian conversion (degrees * Math.PI / 180) with canvas dimensions automatically swapped for 90/270 degree rotations. Horizontal flipping applies scale(-1, 1) and vertical flipping applies scale(1, -1) on the canvas context.
Multiple transforms can be combined and previewed in real time with side-by-side original and result views. The output preserves the original format (JPEG or PNG) via canvas.toBlob(), and the processed image is downloadable instantly without any watermark or compression artifacts.
Key Features
- Rotate images 90 degrees clockwise, 180 degrees, or 90 degrees counter-clockwise with Canvas API ctx.rotate()
- Flip horizontal (mirror left-right) using ctx.scale(-1, 1) transformation
- Flip vertical (mirror top-bottom) using ctx.scale(1, -1) transformation
- Combine multiple rotations and flips with cumulative transform state tracking
- Canvas dimensions automatically swap for 90/270 degree rotations to prevent cropping
- Side-by-side preview comparing original and transformed images in real time
- Preserves original JPEG or PNG format on download via canvas.toBlob() with matching MIME type
- Supports JPG, PNG, WebP images up to 50MB with drag-and-drop file upload
Frequently Asked Questions
How does the rotation algorithm work?
The tool uses HTML5 Canvas API transformations. It translates the canvas origin to the center, applies ctx.rotate() with the angle converted to radians (degrees * Math.PI / 180), then draws the image offset by half its dimensions. For 90 and 270 degree rotations, the canvas width and height are swapped to accommodate the rotated dimensions.
Can I combine rotation and flip in one operation?
Yes, rotations and flips are tracked cumulatively in a transform state object (rotation angle, flipH boolean, flipV boolean). Each new operation builds on the previous state, and all transforms are applied together on the canvas in a single draw pass using translate, rotate, and scale.
Does flipping or rotating reduce image quality?
Rotation by 90, 180, or 270 degrees and flipping are lossless geometric operations on the pixel grid. The canvas renders at the original image resolution. If you download as PNG, it is fully lossless. JPEG downloads use the browser default quality, which is typically 92% or higher.
What image formats are supported?
The tool accepts any image format your browser supports, including JPG/JPEG, PNG, WebP, GIF, BMP, and AVIF. The output is saved as PNG for most formats, or as JPEG if the original was a JPEG file, preserving the appropriate format and quality.
Is there a file size limit?
The maximum file size is 50MB. Since all processing uses the browser Canvas API locally, there is no server upload. Very large images (e.g., 8000x8000 pixels) may use significant browser memory during canvas rendering, but modern browsers handle this well.
Are my images uploaded to a server?
No. The entire process runs client-side in your browser using the Canvas API. Images are loaded via URL.createObjectURL() from your local file, transformed on an HTML5 Canvas element, and the result blob stays in browser memory. No data is transmitted over the network.
How do I reset all transformations?
Click the Reset button to return the transform state to its defaults (0 degree rotation, no horizontal flip, no vertical flip). The result preview is cleared and you can start applying new transformations from the original image.
Can I rotate an image by a custom angle like 45 degrees?
The current tool supports fixed-angle rotations of 90, 180, and 270 degrees, which are the most common operations for correcting photo orientation. These angles ensure pixel-perfect alignment without interpolation artifacts that occur with arbitrary angles.