സൗജന്യ ചിത്രം ക്രോപ്പർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ക്രോപ്പിംഗ് HTML5 Canvas API ഉപയോഗിച്ച് പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസറിൽ നടക്കുന്നു — അപ്‌ലോഡില്ല, സെർവറില്ല. നിങ്ങൾ ഒരു കാൻവാസ് എലമെന്റിൽ നേരിട്ട് ഒരു തിരഞ്ഞെടുപ്പ് പ്രദേശം വലിക്കുന്നു, നിങ്ങൾ ക്രോപ്പ് പ്രയോഗിക്കുമ്പോൾ, ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ 2D റെൻഡറിംഗ് എഞ്ചിൻ തിരഞ്ഞെടുത്ത പിക്സലുകൾ മാത്രം വായിച്ച് JPEG, PNG, അല്ലെങ്കിൽ WebP ആയി വീണ്ടും എൻകോഡ് ചെയ്യുന്നു.

1. 1
   ചിത്രം മെമ്മറിയിലേക്ക് ലോഡ് ചെയ്തിരിക്കുന്നു

   നിങ്ങളുടെ ഫയൽ URL.createObjectURL() ഉപയോഗിച്ച് വായിക്കപ്പെടുന്നു, ഇത് ബ്രൗസറിന് ഒരു പ്രാദേശിക ബ്ലോബ് 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 ക്ലിക്ക് ചെയ്യുമ്പോൾ, കൃത്യമായ ക്രോപ്പ് അളവുകളിൽ ഒരു പുതിയ ഓഫ്-സ്ക്രീൻ കാൻവാസ് സൃഷ്ടിക്കപ്പെടുന്നു. ctx.drawImage() തിരഞ്ഞെടുത്ത ചതുരം മാത്രം പകർത്തുന്നു, canvas.toBlob() നിങ്ങളുടെ തിരഞ്ഞെടുത്ത ഗുണനിലവാര സെറ്റിംഗിൽ ബ്രൗസറിന്റെ native JPEG, PNG, അല്ലെങ്കിൽ WebP എൻകോഡർ ഉപയോഗിച്ച് ഫലം എൻകോഡ് ചെയ്യുന്നു. ഡൗൺലോഡിനായി ഔട്ട്പുട്ട് ഒരു പ്രാദേശിക ബ്ലോബ് URL ആയി തിരികെ നൽകപ്പെടുന്നു.

അനുബന്ധ ടൂളുകൾ