इमेज क्रॉप करें

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

आपकी फ़ाइल URL.createObjectURL के ज़रिए लोड होती है, जो एक लोकल इन-मेमोरी रेफ़रेंस है, कभी अपलोड नहीं, और एडिटर में फ़िट होने के लिए स्केल डाउन करके दिखाई जाती है। आप जो क्रॉप बॉक्स ड्रैग करते हैं वह ऑन-स्क्रीन पिक्सल्स में ट्रैक होता है, लेकिन जिस पल आप क्रॉप दबाते हैं, वे कोऑर्डिनेट्स इमेज के नैचुरल साइज़ और उसके डिस्प्ले साइज़ के बीच के रेशो से गुणा हो जाते हैं। तो अगर आपकी 4000px की फ़ोटो 800px चौड़ी दिखाई जा रही है, तो स्क्रीन पर एक 200px चौड़ा बॉक्स असली इमेज का 1000px चौड़ा क्षेत्र सिलेक्ट करता है। सिलेक्टेड रेक्टेंगल को फिर canvas API के drawImage सोर्स-रेक्टेंगल फ़ॉर्म से कॉपी किया जाता है, जो बिल्कुल वही पिक्सल्स फ़ुल-रिज़ॉल्यूशन ओरिजिनल से उठाता है।

आउटपुट फ़ॉर्मैट इनपुट को फ़ॉलो करता है: PNG अंदर, PNG बाहर (लॉसलेस, सोर्स रीजन जैसा पिक्सल-आइडेंटिकल), बाक़ी सब कुछ canvas.toBlob के ज़रिए 92% क्वालिटी पर JPEG के रूप में री-एनकोड होता है। यह अंतर जानने लायक है: JPEG को क्रॉप करने का मतलब है JPEG कंप्रेशन की एक अतिरिक्त जनरेशन, जो आमतौर पर 92% पर अदृश्य होती है लेकिन असली होती है। अगर आपको पिक्सल-एग्ज़ैक्ट क्रॉप चाहिए, तो टूल को एक PNG दें।

ऊपर बताया गया सब कुछ आपके ब्राउज़र के अपने इमेज डिकोडर और canvas में होता है। फ़ोटो ड्रॉप करने से पहले डेवटूल्स का Network टैब खोलें: कोई रिक्वेस्ट कभी इमेज नहीं ले जाती, जिसका मतलब यह भी है कि कोई सर्वर-साइड साइज़ लिमिट नहीं है और कोई क्यू नहीं है।