സൗജന്യ ഇമേജ് റീസൈസർ

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

Chrome, Firefox, Safari എന്നിവയിൽ നിർമ്മിച്ച അതേ റെൻഡറിംഗ് എഞ്ചിനായ Canvas API ഉപയോഗിച്ച് വലുപ്പം മാറ്റൽ പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസറിൽ നടക്കുന്നു. നിങ്ങളുടെ ചിത്രം പുതിയ അളവുകളിൽ ഒരു ഓഫ്‌സ്ക്രീൻ കാൻവാസിലേക്ക് വരയ്ക്കുകയും പ്രാദേശികമായി വീണ്ടും എൻകോഡ് ചെയ്യുകയും ചെയ്യുന്നു; ഒന്നും നിങ്ങളുടെ ഉപകരണം വിട്ട് പോകില്ല.

1. 1
   ചിത്രം ബ്രൗസർ ഡീകോഡ് ചെയ്യുന്നു

   നിങ്ങൾ ഒരു ഫയൽ ഡ്രോപ്പ് ചെയ്യുകയോ തിരഞ്ഞെടുക്കുകയോ ചെയ്യുമ്പോൾ, ബ്രൗസർ ചിത്രത്തെ (JPEG, PNG, WebP, AVIF, അല്ലെങ്കിൽ GIF) ഒരു HTMLImageElement വഴി അസംസ്കൃത പിക്സൽ ഡാറ്റയാക്കി ഡീകോഡ് ചെയ്യുന്നു. ഒറിജിനൽ പിക്സൽ അളവുകൾ വായിച്ച് വീതി, ഉയരം ഫീൽഡുകൾ മുൻകൂട്ടി പൂരിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു.
2. 2
   Canvas പുതിയ വലുപ്പത്തിൽ വീണ്ടും വരയ്ക്കുന്നു

   Resize ക്ലിക്ക് ചെയ്യുന്നത് ഒരു ഓഫ്‌സ്ക്രീൻ HTMLCanvasElement-നെ നിങ്ങളുടെ തിരഞ്ഞെടുത്ത വീതിയിലേക്കും ഉയരത്തിലേക്കും സെറ്റ് ചെയ്യുന്നു, പിന്നെ ഓരോ പിക്സലും പുതിയ അളവുകളിലേക്ക് സ്കെയിൽ ചെയ്ത് പെയിന്റ് ചെയ്യാൻ ctx.drawImage() വിളിക്കുന്നു. JPEG ഔട്ട്പുട്ടിന്, സുതാര്യ മേഖലകൾ കറുപ്പാകാതിരിക്കാൻ ആദ്യം ഒരു വെളുത്ത പശ്ചാത്തല ഫിൽ പ്രയോഗിക്കുന്നു.
3. 3
   canvas.toBlob() ഔട്ട്പുട്ട് എൻകോഡ് ചെയ്യുന്നു

   ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ canvas.toBlob() രീതി നിങ്ങൾ സെറ്റ് ചെയ്യുന്ന ഗുണനിലവാര തലത്തിൽ പിക്സൽ ഡാറ്റ JPEG, PNG, അല്ലെങ്കിൽ WebP ആയി എൻകോഡ് ചെയ്യുന്നു. നിങ്ങൾ ഒരു ടാർഗെറ്റ് ഫയൽ വലുപ്പം നിർദ്ദേശിച്ചാൽ, ഔട്ട്പുട്ട് ആ വലുപ്പത്തിലോ അതിൽ താഴെയോ യോജിക്കുന്നത് വരെ 7-ഇറ്ററേഷൻ ബൈനറി തിരയൽ ഗുണനിലവാര പാരാമീറ്റർ സ്വയമേവ ക്രമീകരിക്കുന്നു.
4. 4
   ഫലം പ്രാദേശികമായി പ്രിവ്യൂ ചെയ്ത് ഡൗൺലോഡ് ചെയ്യുന്നു

   എൻകോഡ് ചെയ്ത Blob പ്രിവ്യൂ പാനലിനായി ഒരു ഒബ്ജക്റ്റ് URL ആയി മാറ്റുന്നു — സെർവർ റൗണ്ട്-ട്രിപ്പില്ല. ഡൗൺലോഡ് ക്ലിക്ക് ചെയ്യുന്നത് അന്തിമ പിക്സൽ അളവുകൾ ഉൾക്കൊള്ളുന്ന ഒരു ഫയൽനാമത്തോടെ ഒരു പ്രാദേശിക സേവ് ട്രിഗർ ചെയ്യുന്നു.

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