मुफ़्त छवि क्रॉपर

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

क्रॉपिंग पूरी तरह आपके ब्राउज़र में HTML5 Canvas API का उपयोग करके होती है — कोई अपलोड नहीं, कोई सर्वर नहीं। आप एक कैनवस एलिमेंट पर सीधे एक चयन क्षेत्र खींचते हैं, और जब आप क्रॉप लागू करते हैं, ब्राउज़र का बिल्ट-इन 2D रेंडरिंग इंजन केवल चुने पिक्सेल पढ़ता है और उन्हें JPEG, PNG, या WebP में फिर से एनकोड करता है।

1. 1
   इमेज मेमोरी में लोड होती है

   आपकी फ़ाइल URL.createObjectURL() से पढ़ी जाती है, जो ब्राउज़र को एक स्थानीय blob URL देती है। एक HTMLImageElement फ़ाइल को पूरी तरह ब्राउज़र टैब में डिकोड करता है — इमेज बाइट्स कभी आपके डिवाइस से बाहर नहीं जाते।
2. 2
   Pointer Events क्रॉप चयन चलाते हैं

   ब्राउज़र का Pointer Events API (जो माउस, टच, और पेन इनपुट को एकीकृत करता है) एक कैनवस ओवरले पर खींचना ट्रैक करता है। चयन के बाहर दबाना एक नया आयत शुरू करता है; अंदर दबाना इसे हिलाता है; नीचे-दाएँ कोने के पास दबाना इसका साइज़ बदलता है। वैकल्पिक एस्पेक्ट-रेश्यो प्रीसेट (1:1, 16:9, 4:3, आदि) खींचने के दौरान ज्यामिति को सीमित करते हैं।
3. 3
   Canvas लाइव प्रीव्यू खींचता है

   हर क्रॉप बदलाव पर, Canvas 2D कॉन्टेक्स्ट इमेज को फिर से खींचता है, चयन के बाहर एक गहरा ओवरले लागू करता है, क्रॉप क्षेत्र को पूरी स्पष्टता के साथ मूल इमेज दिखाने के लिए साफ़ करता है, और एक rule-of-thirds ग्रिड और एक टील रीसाइज़ हैंडल ओवरले करता है।
4. 4
   toBlob() परिणाम एनकोड और डिलीवर करता है

   जब आप Crop क्लिक करते हैं, सटीक क्रॉप आयामों पर एक नया off-screen कैनवस बनाया जाता है। ctx.drawImage() केवल चुने आयत को कॉपी करता है, और canvas.toBlob() आपकी चुनी क्वालिटी सेटिंग पर ब्राउज़र के नेटिव JPEG, PNG, या WebP एनकोडर का उपयोग करके परिणाम एनकोड करता है। आउटपुट डाउनलोड के लिए एक स्थानीय blob URL के रूप में वापस दिया जाता है।

संबंधित टूल