Image Cropper
Image Cropper एक ब्राउज़र-आधारित टूल है जो आपको क्लाइंट-साइड पर छवियों को पिक्सेल-प्रिसाइस तरीके से क्रॉप करने की सुविधा देता है। यह टूल आपके डेटा को कहीं अपलोड किए बिना काम करता है, जिससे आपकी प्राइवेसी सुरक्षित रहती है।
Image Cropper एक ब्राउज़र-आधारित टूल है जो OffscreenCanvas API का उपयोग कर क्लाइंट-साइड इमेज क्रॉपिंग करता है। यह ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sw, sh) मेथड के माध्यम से पिक्सेल-प्रिसाइस क्रॉपिंग प्रदान करता है, जहाँ sx और sy क्रॉप की शुरुआत के निर्देशांक हैं और sw तथा sh क्रॉप क्षेत्र की चौड़ाई और ऊंचाई होती हैं। यह टूल आपकी छवि की सीमाओं के भीतर वैल्यूज़ को क्लैम्प करता है, जिससे क्रॉपिंग में कोई त्रुटि नहीं होती। सभी प्रोसेसिंग ब्राउज़र में ही होती है, इसलिए कोई डेटा सर्वर पर अपलोड नहीं होता और आपकी प्राइवेसी बनी रहती है। यदि आपको छवि का आकार बदलना या घुमाना है, तो आप resize-image और rotate-image जैसे संबंधित टूल्स का भी उपयोग कर सकते हैं।
कैसे उपयोग करें
- अपनी छवि अपलोड करें या ड्रैग एंड ड्रॉप करें।
- X और Y पिक्सेल मान सेट करें जो क्रॉपिंग की शुरुआत को दर्शाते हैं।
- चौड़ाई (Width) और ऊंचाई (Height) पिक्सेल मान निर्दिष्ट करें जो क्रॉप क्षेत्र को परिभाषित करते हैं।
- प्रिव्यू देखें और आवश्यकतानुसार मान समायोजित करें।
- क्रॉप की गई छवि डाउनलोड करें, जो मूल फॉर्मेट (JPEG 92% गुणवत्ता या PNG) में होगी।
यह कैसे काम करता है
Image Cropper OffscreenCanvas API का उपयोग करता है, जो मुख्य कैनवास से अलग काम करता है और ब्राउज़र की मेमोरी में इमेज प्रोसेसिंग करता है। ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sw, sh) विधि के जरिये, यह क्रॉपिंग के लिए छवि के एक उपखंड को कॉपी करता है। यहाँ, sx और sy क्रॉपिंग की शुरुआत को निर्दिष्ट करते हैं जबकि sw और sh क्रॉपिंग क्षेत्र की चौड़ाई और ऊंचाई होती हैं। ये मान छवि की सीमाओं के भीतर क्लैम्प किए जाते हैं ताकि आउट-ऑफ-बाउंड एरर से बचा जा सके। परिणामस्वरूप कैनवास की साइज क्रॉप के क्षेत्र के अनुसार सेट होती है। आउटपुट फाइल मूल इमेज फॉर्मेट को कायम रखती है, जैसे JPEG में 92% गुणवत्ता या PNG। इससे मूल छवि की गुणवत्ता बनी रहती है, जबकि फाइल का आकार कम हो सकता है।
उदाहरण
इनपुट छवि: 1920x1080 पिक्सेल JPEG
क्रॉप पैरामीटर: sx=300, sy=200, sw=800, sh=600
आउटपुट छवि: 800x600 पिक्सेल JPEG (92% गुणवत्ता)कब उपयोग करें
- डेवलपर जब UI के लिए पिक्सेल-प्रिसाइस छवियों को क्रॉप करना चाहता है।
- डिजाइनर को छवि के किसी विशेष हिस्से को काटकर उसे प्रस्तुत करना हो।
- SEO विशेषज्ञ जब वेबसाइट के लिए ऑप्टिमाइज़्ड इमेजेस बनाना चाहता है।
- छात्र जो इमेज प्रोसेसिंग की क्लाइंट-साइड तकनीकों को सीख रहे हैं।
- वेबसाइट पर उपयोगकर्ता द्वारा अपलोड की गई छवियों का प्रीव्यू और क्रॉपिंग।
यदि आपको छवि को आकार बदलने या घुमाने की आवश्यकता हो तो resize-image और rotate-image टूल्स मददगार साबित होंगे। साथ ही, आप flip-image से इमेज को उलट सकते हैं और watermark-image से वाटरमार्क जोड़ सकते हैं।
अक्सर पूछे जाने वाले सवाल
क्या Image Cropper में अपलोड की गई तस्वीरें कहीं सर्वर पर भेजी जाती हैं?
नहीं, Image Cropper पूरी तरह से क्लाइंट-साइड पर चलता है और OffscreenCanvas API का उपयोग करता है। आपकी तस्वीरें ब्राउज़र के बाहर कहीं नहीं भेजी जातीं, जिससे आपकी प्राइवेसी सुरक्षित रहती है।
क्रॉप क्षेत्र के लिए X, Y, Width, Height वैल्यूज़ कैसे निर्धारित की जाती हैं?
X और Y पिक्सेल में क्रॉप की शुरुआत की स्थिति हैं, जबकि Width और Height क्रॉप क्षेत्र के आयाम हैं। सभी मान छवि की वास्तविक चौड़ाई और ऊंचाई के भीतर क्लैम्प होते हैं ताकि आउट-ऑफ-बाउंड एरर न हो।
क्या आउटपुट इमेज का फॉर्मेट और गुणवत्ता बदलती है?
आउटपुट इमेज उसी फॉर्मेट में बनाई जाती है जो मूल इमेज का होता है। JPEG के लिए 92% गुणवत्ता रखी जाती है और PNG फॉर्मेट की गुणवत्ता अपरिवर्तित रहती है। इससे गुणवत्ता और फाइल साइज का संतुलन बना रहता है।
क्या मैं Image Cropper के साथ इमेज को घुमा या आकार बदल सकता हूँ?
Image Cropper केवल क्रॉपिंग के लिए है। इमेज को घुमाने के लिए आप rotate-image टूल और आकार बदलने के लिए resize-image टूल का उपयोग कर सकते हैं।
क्या यह टूल मोबाइल ब्राउज़र पर भी काम करता है?
हाँ, Image Cropper आधुनिक मोबाइल ब्राउज़रों में भी काम करता है क्योंकि यह OffscreenCanvas और HTML5 कैनवास API पर आधारित है। हालांकि, बेहतर प्रदर्शन के लिए डेस्कटॉप ब्राउज़र की सलाह दी जाती है।