मोफत इमेज क्रॉपर

हे कसे कार्य करते

Cropping HTML5 Canvas API वापरून पूर्णपणे तुमच्या ब्राउझरमध्ये होते — अपलोड, सर्व्हर नाही. तुम्ही canvas घटकावर थेट निवड क्षेत्र ड्रॅग करता, आणि crop लावल्यावर, ब्राउझरचे बिल्ट-इन 2D रेंडरिंग इंजिन फक्त निवडलेले pixels वाचते आणि ते JPEG, PNG, किंवा WebP मध्ये पुन्हा-एन्कोड करते.

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

   तुमची फाइल URL.createObjectURL() ने वाचली जाते, जो ब्राउझरला स्थानिक blob URL देतो. एक HTMLImageElement फाइल पूर्णपणे ब्राउझर टॅबमध्ये डीकोड करतो — इमेज बाइट्स कधीच तुमच्या डिव्हाइसमधून बाहेर जात नाहीत.
2. 2
   Pointer Events crop निवड चालवते

   ब्राउझरचे Pointer Events API (जे mouse, touch, आणि pen इनपुट एकत्र करते) canvas overlay वरील drags ट्रॅक करते. निवडीबाहेर दाबल्याने नवीन आयत सुरू होतो; आत दाबल्याने तो हलतो; बाजूला-खालच्या कोपऱ्याजवळ दाबल्याने त्याचा आकार बदलतो. पर्यायी aspect-ratio प्रीसेट्स (1:1, 16:9, 4:3, इ.) ड्रॅगिंग दरम्यान भूमिती मर्यादित करतात.
3. 3
   Canvas लाइव्ह प्रिव्ह्यू काढते

   प्रत्येक crop बदलावर, Canvas 2D context इमेज पुन्हा काढतो, निवडीबाहेर गडद overlay लावतो, मूळ इमेज पूर्ण निष्ठेने दाखवण्यासाठी crop क्षेत्र स्वच्छ करतो, आणि rule-of-thirds grid व teal resize handle overlay करतो.
4. 4
   toBlob() निकाल एन्कोड करतो आणि देतो

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

संबंधित साधने