मुफ़्त इमेज रोटेटर

90/180/270 बनाम बाकी सब, Lossless Line

Image rotation दो completely different kinds की होती हैं। Exactly 90°, 180° या 270° के rotations lossless होते हैं: हर source pixel exactly एक integer destination pixel पर land होता है, bitmap recomputed की बजाय permuted होता है, और interpolation, blending, quality loss बिल्कुल नहीं। 90° clockwise rotation W × H image में pixel (x, y) को new H × W output में position (H − 1 − y, x) पर map करता है। 180° rotation (x, y) को (W − 1 − x, H − 1 − y) पर map करता है। ये pure memory-shuffle operations हैं।

किसी भी अन्य angle के लिए resampling की ज़रूरत है: हर destination pixel के लिए, algorithm compute करता है कि वह source में कहां से आता (inverse rotation द्वारा), पाता है कि source location generally fractional है, और surrounding source pixels को interpolation kernel से combine करता है। Common kernels:

• Nearest neighbour: single closest source pixel pick करता है। Fast, hard edges preserve करता है, लेकिन rotated lines पर visible «jaggies» produce करता है।
• Bilinear: चार nearest source pixels का weighted average। Smooth, fast, अधिकांश browser canvas implementations के लिए default।
• Bicubic: smooth cubic kernel use करते हुए 16 nearest source pixels का weighted average। Bilinear से sharper; Photoshop के bicubic options में default।
• Lanczos: 6×6 या 8×8 neighbourhood पर windowed sinc-function। Common use में highest-quality kernel; significantly slower; sharp edges पर ringing artefacts produce कर सकता है।

हर kernel detail preservation बनाम ringing या blurring के बीच trade-off करता है, और वे सब एक truth share करते हैं: कोई भी non-90 rotation कुछ source information discard करता है। Fine high-frequency detail (one-pixel lines, subpixel-positioned text edges, cleanly aliased pixel art) किसी भी kernel से 30° या 45° rotation survive नहीं कर सकता बिना कुछ softening के। Useful intuition: 1° से rotate करें, फिर −1° से back करें, और original नहीं मिलता, softer copy मिलती है। 90° से rotate करें फिर −90° से और exactly original bitmap वापस मिलता है।

EXIF Orientation: आपकी Photo Sideways होने की Silent Reason

«browser shows my photo upside down» problem की एक specific cause है। Modern smartphones photo लेते समय image physically rotate नहीं करते, वे original sensor orientation store करते हैं और एक EXIF Orientation tag (JEIDA द्वारा 1995 के आसपास introduced) add करते हैं जो viewers को बताता है image कैसे display होनी चाहिए। Tag के 8 possible values हैं: 1=normal, 3=180°, 6=90° clockwise, 8=90° counter-clockwise, plus चार mirrored variants।

2010 से पहले, devices rotated pixels write करते थे और Orientation = 1; उसके बाद modern phones original pixels store करते हैं Orientation set के साथ, storage और battery बचाता है। Problem यह है: browsers historically <img> elements के बाहर EXIF Orientation honour नहीं करते थे। Portrait phone photo canvas-based tool पर drag करने पर, canvas उसे sideways draw करता था जब तक tool explicitly Orientation tag read और apply न करे। CSS image-orientation property 2017 में HTML के लिए fix है; modern createImageBitmap() के साथ imageOrientation: 'from-image' canvas के लिए fix करता है। Chrome 81 (April 2020) ने image-orientation: from-image को <img> elements के लिए default बना दिया।

यदि आपने कभी browser में photo rotate की और वह «already rotated» appear हुई, या twice rotate हुई: आपने यही hit किया। Honest fix यह है कि rotation tool EXIF tag read करे, mentally पहले वह orientation apply करे, फिर ऊपर user का chosen rotation add करे।

Canvas यह कैसे करता है

Canvas का rotate(angle) method coordinate system को canvas origin (0, 0) के around rotate करता है। Origin top-left corner है, इसलिए naively ctx.rotate(angle) call करने के बाद ctx.drawImage(img, 0, 0) image को उसके top-left corner के around rotate करता है, अधिकांश rotated pixels upper-left में off-canvas भेज देता है। Standard recipe इसे translate-rotate-translate sandwich से correct करती है:

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 rotation के लिए, destination canvas को swapped (90/270) या original (180) dimensions के लिए sized करना होता है। Arbitrary angle के लिए, rotated image की bounding rectangle source dimension से बड़ी होती है: θ से rotate किए गए W × H image के लिए, new bounding box |W·cos(θ)| + |H·sin(θ)| wide और |W·sin(θ)| + |H·cos(θ)| tall होता है। इसलिए 45° पर rotate किए गए 1000 × 800 image को roughly 1273 × 1273 canvas चाहिए हर rotated pixel hold करने के लिए। «Crop to fit» toggle decide करता है canvas expand करें (हर pixel preserve करते हुए, transparent या white triangular corners के साथ) या original dimensions पर trim करें (rotated content clip करते हुए)।

PNG vs JPG Output, Corner Problem

जब non-90 rotation canvas expand करता है, चार triangular corners को something से fill करना होता है। PNG उन gaps को fully transparent pixels (alpha = 0) के रूप में render कर सकता है, rotated image को दूसरे background के ऊपर layer करने के लिए perfect। JPG में alpha channel नहीं है और किसी भी unfilled pixels को canvas के clear colour पर render करता है, जिसे JPEG opaque black पर flatten करता है।

यह tool JPG output को black-corner problem से बचाने के लिए encoding से पहले white background पर compose करता है। PNG output transparency preserve करता है। Formats के बीच choice: PNG किसी भी transparency वाले या जहां आगे edit करेंगे उसके लिए, JPG photos के लिए जहां file size matter करता है।

JPGs के लिए एक और nuance है। Lossless JPEG rotation technically possible है, jpegtran utility JPEG block boundaries (8×8 DCT coefficient blocks) को image re-decode किए बिना rearrange करती है, इसलिए 90/180/270 rotation underlying compressed data intact रख सकता है और एक JPEG emit कर सकता है जो quality में original के bit-identical हो। Problem iMCU edge constraint है: image dimensions block size का multiple होनी चाहिए, अन्यथा rotation या तो कुछ edge pixels trim करता है या partial block छोड़ता है। यह page jpegtran-style block manipulation की बजाय canvas API use करता है, इसलिए JPG output यहां हमेशा re-encoded होता है, maximum quality पर, लेकिन किसी भी JPEG re-encode में inherent small generation loss के साथ।

Browser Rotator कब Reach करें

• Smartphone shots जो sideways import हुईं desktop application में जो EXIF Orientation honour नहीं करता।
• Scanned documents जो 90° rotate होकर आए क्योंकि scanner का auto-detect wrong था।
• Print orientation: portrait vs landscape printing के लिए image prepare करना।
• Art और design composition: different visual orientations test करने के लिए photograph rotate करना।
• Social media uploads से पहले quick fixes जब platform का auto-rotate confused हो।
• Sensitive content: work documents, ID photos, family photos, जो आप third-party service पर upload नहीं करना चाहते।

More Questions

क्या 90° Rotate करने पर Photo Quality Lose होगी?

नहीं, rotation step में नहीं, 90/180/270 rotations lossless permutations हैं। Quality risk encoder है। यदि आप JPEG upload करते हैं, तो यह tool उसे decode करता है, pixel array rotate करता है, फिर result re-encode करता है। Re-encode थोड़ा generation loss add करता है (maximum quality पर typically invisible) क्योंकि JPEG lossy है। इससे भी बचने के लिए, PNG के रूप में download करें, या jpegtran जैसा dedicated tool use करें जो re-decode किए बिना DCT blocks rearrange करता है।

SVG Rotate करने पर Image Crisp क्यों रहती है?

क्योंकि SVG vector है, यह pixel grid की बजाय shapes को mathematical paths के रूप में store करता है। SVG को transform="rotate(angle)" से rotate करना केवल path coordinates modify करता है; कोई resampling step नहीं है और किसी भी angle पर quality loss नहीं। Browser rotated paths को हर बार redraw पर re-rasterise करता है, हमेशा current zoom level पर। यह tool raster images (PNG, JPG, WebP) पर operate करता है इसलिए resampling cost का सामना करता है; SVGs को transform attribute directly edit करके या Inkscape या Illustrator जैसे vector editor से best rotate किया जाता है।

Corners White क्यों हैं Transparent की बजाय?

आप JPG output download कर रहे हैं। JPG में alpha channel नहीं है, इसलिए non-90 rotation से left triangular gaps को encoding से पहले white से fill किया जाता है (या black, उन tools पर जो background के विरुद्ध compose नहीं करते, अत्यंत common dark-corner surprise)। PNG download पर switch करें और corners properly transparent होंगे।

क्या मैं 1° Increments में Rotate कर सकता हूं?

हां। ऊपर slider 1° steps में move करता है; input field कोई भी decimal accept करता है (45.5° काम करता है)। बहुत precise alignment work के लिए (photo में tilted horizon straighten करना, उदाहरण के लिए) sub-degree precision matter कर सकती है। हर non-90 rotation थोड़ा quality cost करता है, इसलिए repeated fine-tuning के लिए कई incremental adjustments की बजाय final target angle पर single rotation करने पर consider करें।

क्या कुछ Server को Send होता है?

नहीं। Image आपके browser द्वारा decode होती है, Canvas 2D API के माध्यम से canvas पर draw होती है, और download के लिए re-encoded होती है, सब आपके browser process में। File आपके device से कभी नहीं निकलती। Tool page load होने के बाद offline भी काम करता है।