मुफ़्त इमेज रोटेटर और फ़्लिपर

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

घुमाव, फ़्लिप, और एंगल करेक्शन यहाँ पूरी तरह आपके ब्राउज़र के अंदर HTML Canvas API का उपयोग करके होते हैं — कोई फ़ाइल कभी किसी सर्वर पर नहीं भेजी जाती। टूल आपकी इमेज को चुने एंगल और स्केल ट्रांसफ़ॉर्म पर एक off-screen कैनवस पर खींचता है, फिर ब्राउज़र के अपने कोडेक का उपयोग करके परिणाम को JPEG, PNG, या WebP में एनकोड करता है।

1. 1
   इमेज स्थानीय रूप से डिकोड होती है

   आपकी JPEG, PNG, या WebP फ़ाइल एक स्थानीय ऑब्जेक्ट URL के ज़रिए एक HTMLImageElement में लोड होती है — एक ब्राउज़र मेमोरी रेफ़रेंस जो कभी आपके डिवाइस से बाहर नहीं जाती। प्राकृतिक पिक्सेल आयाम सीधे डिकोड किए बिटमैप से पढ़े जाते हैं।
2. 2
   Canvas ट्रांसफ़ॉर्म लागू होता है

   एक off-screen कैनवस को घूमे हुए बाउंडिंग बॉक्स में फ़िट होने के लिए साइज़ दी जाती है (हर अक्ष के लिए width·cos + height·sin)। Canvas 2D कॉन्टेक्स्ट फिर केंद्र में ट्रांसलेट किया जाता है, चुने एंगल पर रेडियन में घुमाया जाता है, और फ़्लिप के लिए होरिज़ॉन्टल या वर्टिकल अक्ष पर -1 से स्केल किया जाता है — कोई बाहरी लाइब्रेरी के बिना सभी स्टैंडर्ड ctx.rotate / ctx.scale ऑपरेशन।
3. 3
   ऑटो-क्रॉप कोनों को काटता है (वैकल्पिक)

   समकोण के अलावा अन्य कोणों पर घुमाव के लिए, एक हाथ से लिखा ज्यामिति फ़ंक्शन — largestInnerRect — मूल एस्पेक्ट रेश्यो के सबसे बड़े axis-aligned आयत की गणना करता है जो घूमे हुए बाउंडिंग बॉक्स के अंदर फ़िट होता है, ताकि त्रिकोणीय खाली कोने इमेज को विकृत किए बिना हटाए जाएँ।
4. 4
   ब्राउज़र कोडेक परिणाम एनकोड करता है

   canvas.toBlob() पिक्सेल डेटा ब्राउज़र के बिल्ट-इन इमेज एनकोडर को सौंपता है, एक JPEG (चुनने योग्य क्वालिटी और पारदर्शी कोनों के लिए बैकग्राउंड फ़िल कलर के साथ), PNG, या WebP Blob बनाते हुए जिसे आप सीधे डाउनलोड करते हैं।

संबंधित टूल