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

ब्राउज़र-आधारित इमेज क्रॉपिंग कैसे काम करती है

क्रॉपिंग प्रक्रिया Canvas API का उपयोग करके पूरी तरह आपके ब्राउज़र टैब के अंदर चलती है। कोई सर्वर-साइड प्रोसेसिंग नहीं, कोई अपलोड नहीं, कोई तृतीय-पक्ष सेवाएँ नहीं। हर कदम आपके डिवाइस पर होता है।

1. इमेज को <img> एलिमेंट में लोड करें ताकि ब्राउज़र उसे स्थानीय रूप से डिकोड करे। एक कैनवास ओवरले व्यूपोर्ट में फ़िट होने के लिए इमेज को स्केल करके रेंडर करता है, जबकि एक ड्रैग करने योग्य चयन आयत वर्तमान क्रॉप क्षेत्र दिखाता है।
2. आयत को उसके किनारों या कोनों से खींचकर क्रॉप क्षेत्र समायोजित करें। आयत इमेज की सीमाओं से बंधा रहता है ताकि आप चित्र के बाहर का क्षेत्र चुन न सकें। जब कोई निश्चित आस्पेक्ट रेशियो (1:1, 16:9, 4:3) सक्रिय हो, तो आकार बदलना उस अनुपात को स्वचालित रूप से बनाए रखता है।
3. पिक्सेल रीडआउट खींचते समय लाइव अपडेट होता है, जो इमेज-पिक्सेल निर्देशांकों में वर्तमान क्रॉप चौड़ाई, ऊँचाई, X और Y स्थिति दिखाता है। यह आपको बिना अनुमान के सटीक आयाम लक्षित करने देता है।
4. जब आप क्रॉप करें और डाउनलोड करें पर क्लिक करते हैं, तो पृष्ठ स्रोत इमेज के केवल चयनित क्षेत्र को मूल पिक्सेल रिज़ॉल्यूशन पर एक ऑफ़स्क्रीन कैनवास पर खींचता है, फिर canvas.toBlob() के माध्यम से स्रोत फ़ाइल के समान फ़ॉर्मैट में परिणाम निर्यात करता है। डाउनलोड के लिए एक Blob URL उत्पन्न होता है।

इमेज ऑनलाइन क्यों क्रॉप करें?

• क्रॉपिंग अवांछित किनारों, खाली जगह या दृश्य अव्यवस्था को हटाती है। एक ही क्रॉप पास अक्सर किसी भी फ़िल्टर या रंग समायोजन से अधिक फ़ोटो की संरचना में सुधार करता है।
• आस्पेक्ट रेशियो नियंत्रण प्रकाशन प्लेटफ़ॉर्म के लिए आवश्यक है। सोशल-मीडिया फ़ीड प्रोफ़ाइल के लिए 1:1, वीडियो थंबनेल के लिए 16:9 और मानक फ़ोटोग्राफ़ी के लिए 4:3 की अपेक्षा करते हैं। सही अनुपात में क्रॉप करने से अपलोड करते समय अजीब लेटरबॉक्सिंग या क्रॉप-कट-ऑफ से बचा जा सकता है।
• क्लाइंट-साइड क्रॉपिंग उन लॉक-डाउन कॉर्पोरेट उपकरणों पर एकमात्र विकल्प है जिनमें फ़ोटो एडिटर नहीं है। चूँकि कुछ भी अपलोड नहीं होता, संवेदनशील इमेज के लिए कोई डेटा-लीक जोखिम या अनुपालन समीक्षा की आवश्यकता नहीं है।
• लाइव डाइमेंशन रीडआउट अनुमान को समाप्त करता है। खींचते समय आप पिक्सेल निर्देशांक और चयन आकार देखते हैं, जिससे आप पिक्सेल-माप उपकरण पर स्विच किए बिना सटीक चौड़ाई और ऊँचाई तक क्रॉप कर सकते हैं।

सामान्य क्रॉपिंग अनुप्रयोग

क्रॉपिंग वेब प्रकाशन, सोशल मीडिया और सॉफ़्टवेयर विकास में सबसे सामान्य इमेज संपादनों में से एक है। यहाँ तीन परिदृश्य हैं जहाँ ब्राउज़र-आधारित क्रॉपर समय बचाता है।

• ऑनलाइन स्टोर के लिए उत्पाद फ़ोटो तैयार करना। एक समान 1:1 या 4:5 आस्पेक्ट रेशियो में क्रॉप करें ताकि हर लिस्टिंग थंबनेल ग्रिड में संरेखित हो। निर्यात मूल फ़ॉर्मैट को संरक्षित करता है, इसलिए JPEG उत्पाद शॉट JPEG ही रहते हैं।
• दस्तावेज़ीकरण या बग रिपोर्ट के लिए स्क्रीनशॉट ट्रिम करना। इमेज को टिकट या पुल रिक्वेस्ट से संलग्न करने से पहले ब्राउज़र टूलबार, विंडोज टास्कबार या संवेदनशील सूचनाएँ क्रॉप करें।
• लैंडिंग पेज के लिए हीरो इमेज या बैनर फ्रेम करना। 16:9 प्रीसेट लॉक करें, फ़ोटो के सबसे महत्वपूर्ण भाग को क्रॉप आयत के केंद्र में रखें, और रेटिना डिस्प्ले पर सर्वोत्तम गुणवत्ता के लिए मूल रिज़ॉल्यूशन पर निर्यात करें।

एक उदाहरण: 4000×3000 फ़ोटो को हीरो बैनर के लिए 1200×675 पर क्रॉप करना

डिजिटल कैमरे से 4000×3000 पिक्सेल की फ़ोटो एक सामान्य वेब हीरो बैनर के लिए बहुत बड़ी होती है। बैनर स्थान 1200×675 (16:9 फ्रेम) हो सकता है।

फ़ोटो को अपलोड ज़ोन में छोड़ें। इमेज पूर्ण रिज़ॉल्यूशन पर लोड होती है लेकिन आरामदायक ड्रैग इंटरैक्शन के लिए व्यूपोर्ट में फ़िट होने के लिए स्केल करती है। 16:9 आस्पेक्ट रेशियो प्रीसेट चुनें। क्रॉप आयत तुरंत सबसे चौड़े 16:9 क्षेत्र पर स्नैप करता है जो इमेज में फ़िट बैठता है। फ़ोकल पॉइंट — एक पर्वत शिखर, एक उत्पाद, एक व्यक्ति का चेहरा — को फ्रेम में रखने के लिए आयत को खींचें। लाइव रीडआउट 4000×2250 (पूर्ण-इमेज 16:9 विंडो) पर वर्तमान चयन दिखाता है। एक कोने के हैंडल को पकड़ें और तब तक अंदर खींचें जब तक चौड़ाई रीडआउट 1200 px न दिखाए। ऊँचाई स्वचालित रूप से अनुसरण करती है क्योंकि अनुपात लॉक है। Crop & Download पर क्लिक करें। पृष्ठ मूल पिक्सेल से चयनित 1200×675 क्षेत्र निकालता है और क्रॉप की गई फ़ाइल स्रोत फ़ॉर्मैट में वितरित करता है। पूरी प्रक्रिया में एक या दो सेकंड लगते हैं और प्रारंभिक पृष्ठ लोड से परे कोई नेटवर्क बैंडविड्थ का उपयोग नहीं करती।

क्रॉप करने के लिए कौन से इमेज फ़ॉर्मैट समर्थित हैं?

यह उपकरण ब्राउज़र द्वारा डिकोड किए जा सकने वाले किसी भी फ़ॉर्मैट को स्वीकार करता है: PNG, JPEG और WebP लगभग सभी वास्तविक दुनिया के उपयोग को कवर करते हैं। क्रॉप किया गया आउटपुट स्रोत फ़ाइल के समान फ़ॉर्मैट में सहेजा जाता है। PNG लॉसलेस रहता है, JPEG अपनी मूल गुणवत्ता स्तर बनाए रखता है, और WebP WebP ही रहता है। फ़ॉर्मैट स्रोत फ़ाइल के MIME प्रकार से पता लगाया जाता है।

क्या क्रॉप करने से इमेज फ़ाइल का आकार कम हो जाता है?

क्रॉप करने से पिक्सेल हटते हैं, इसलिए आउटपुट का फ़ाइल आकार आमतौर पर स्रोत से छोटा होता है, विशेषकर जब आप बड़ा बॉर्डर या खाली क्षेत्र हटाते हैं। निर्यात मूल फ़ाइल फ़ॉर्मैट और उसके एन्कोडिंग पैरामीटर का उपयोग करता है — PNG लॉसलेस रहता है, JPEG अपनी मूल गुणवत्ता सेटिंग बनाए रखता है — इसलिए बचत केवल कम पिक्सेल गणना से आती है, पुनः संपीड़न से नहीं।

आस्पेक्ट रेशियो प्रीसेट क्या करते हैं?

प्रीसेट (1:1, 16:9, 4:3, 3:2, 9:16) क्रॉप आयत के चौड़ाई-से-ऊँचाई अनुपात को लॉक करते हैं। जब कोई प्रीसेट सक्रिय होता है, तो किसी भी कोने या किनारे के हैंडल को खींचने से अनुपात स्थिर रखते हुए चयन आकार समायोजित होता है। मुक्त मोड पर स्विच करने से बाधा हट जाती है ताकि आप आयत को मनमाने ढंग से आकार दे सकें। अनुपात इमेज-पिक्सेल निर्देशांकों पर लागू होता है, इसलिए निर्यात किए गए आउटपुट का आस्पेक्ट रेशियो बिल्कुल वही होता है जो आपने चुना था।

क्या इमेज किसी सर्वर पर अपलोड होती है?

नहीं। इमेज कभी आपका डिवाइस नहीं छोड़ती। पृष्ठ ब्राउज़र की File API का उपयोग करके इमेज को मेमोरी में पढ़ता है और Canvas API का उपयोग करके क्रॉप और निर्यात करता है। आप अपने ब्राउज़र का DevTools Network पैनल खोलकर इसे सत्यापित कर सकते हैं — क्रॉपिंग के दौरान एकमात्र आउटबाउंड अनुरोध प्रारंभिक पृष्ठ लोड और विज्ञापन कॉल हैं। कोई इमेज डेटा प्रेषित नहीं होता।

क्या मैं सटीक पिक्सेल निर्देशांक दर्ज करके किसी विशिष्ट क्षेत्र को क्रॉप कर सकता हूँ?

वर्तमान संस्करण इमेज पूर्वावलोकन पर ड्रैग इंटरैक्शन के माध्यम से क्रॉप आयत को समायोजित करता है। आप चयन के X, Y, चौड़ाई और ऊँचाई के लिए लाइव पिक्सेल निर्देशांक पढ़ सकते हैं। क्रॉप आयत के लिए प्रत्यक्ष संख्यात्मक इनपुट v1 में उपलब्ध नहीं है लेकिन भविष्य के अपडेट के लिए एक नियोजित संवर्द्धन है।

मूल इमेज का क्या होता है?

मूल फ़ाइल आपके डिवाइस पर रहती है। पृष्ठ इसे प्रदर्शन और क्रॉपिंग के लिए ब्राउज़र मेमोरी में पढ़ता है, लेकिन डिस्क पर स्रोत फ़ाइल को कभी संशोधित नहीं करता। क्रॉप किया गया आउटपुट एक नई फ़ाइल है जिसे आप अलग से डाउनलोड करते हैं। मूल फ़ाइल आपके कंप्यूटर या फ़ोन पर अपने मूल स्थान पर अछूती रहती है।

क्या क्रॉप करने के लिए कोई फ़ाइल आकार सीमा है?

यह उपकरण निम्न-अंत उपकरणों पर ब्राउज़र मेमोरी को नियंत्रण में रखने के लिए अपलोड ज़ोन में 30 MB प्रति फ़ाइल सीमा का पालन करता है। यदि आपकी इमेज 30 MB से बड़ी है, तो आप इसे क्रॉप करने के लिए यहाँ लोड करने से पहले एक समर्पित इमेज रिसाइज़र टूल का उपयोग करके पहले आकार बदल सकते हैं।

क्या क्रॉप करना मोबाइल फ़ोन और टैबलेट पर काम करता है?

हाँ। क्रॉप हैंडल टच टार्गेट को ध्यान में रखकर आकार दिए गए हैं, और इंटरैक्शन पॉइंटर इवेंट का उपयोग करता है जो माउस क्लिक और फ़िंगर टैप दोनों के साथ काम करता है। फ़ोन स्क्रीन पर इमेज पूर्वावलोकन उपलब्ध चौड़ाई के अनुसार अनुकूलित होता है, और नियंत्रण आसान एक-हाथ उपयोग के लिए लंबवत रूप से स्टैक होते हैं।