സൗജന്യ ചിത്രം റൊട്ടേറ്റർ & ഫ്ലിപ്പർ

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

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

1. 1
   ചിത്രം പ്രാദേശികമായി ഡീകോഡ് ചെയ്തിരിക്കുന്നു

   നിങ്ങളുടെ JPEG, PNG, അല്ലെങ്കിൽ WebP ഫയൽ ഒരു പ്രാദേശിക ഒബ്ജക്റ്റ് URL വഴി ഒരു HTMLImageElement-ലേക്ക് ലോഡ് ചെയ്യപ്പെടുന്നു — ഒരിക്കലും നിങ്ങളുടെ ഉപകരണം വിടാത്ത ഒരു ബ്രൗസർ മെമ്മറി റഫറൻസ്. യഥാർത്ഥ പിക്സൽ അളവുകൾ ഡീകോഡ് ചെയ്ത ബിറ്റ്മാപ്പിൽ നിന്ന് നേരിട്ട് വായിക്കുന്നു.
2. 2
   Canvas ട്രാൻസ്ഫോം പ്രയോഗിച്ചു

   ഭ്രമണം ചെയ്ത ബൗണ്ടിംഗ് ബോക്സിന് (ഓരോ ആക്സിസിനും width·cos + height·sin) യോജിക്കുന്ന വലുപ്പത്തിലാണ് ഒരു ഓഫ്-സ്ക്രീൻ കാൻവാസ്. Canvas 2D കോൺടെക്സ്റ്റ് പിന്നെ കേന്ദ്രത്തിലേക്ക് translate ചെയ്യുന്നു, തിരഞ്ഞെടുത്ത ആംഗിളിൽ radians-ൽ ഭ്രമണം ചെയ്യുന്നു, ഫ്ലിപ്പുകൾക്ക് തിരശ്ചീന അല്ലെങ്കിൽ ലംബ ആക്സിസിൽ -1 കൊണ്ട് സ്കെയിൽ ചെയ്യുന്നു — എല്ലാം സ്റ്റാൻഡേർഡ് ctx.rotate / ctx.scale ഓപ്പറേഷനുകൾ ബാഹ്യ ലൈബ്രറി ഇല്ലാതെ.
3. 3
   ഓട്ടോ-ക്രോപ്പ് കോണുകൾ വെട്ടിമാറ്റുന്നു (ഓപ്ഷണൽ)

   വലത്-ആംഗിളല്ലാത്ത ഭ്രമണങ്ങൾക്ക്, largestInnerRect എന്ന കൈകൊണ്ട് എഴുതിയ ജ്യാമിതി ഫംഗ്ഷൻ ഭ്രമണം ചെയ്ത ബൗണ്ടിംഗ് ബോക്സിനുള്ളിൽ യോജിക്കുന്ന ഒറിജിനൽ അസ്പെക്റ്റ് അനുപാതത്തിലുള്ള ഏറ്റവും വലിയ axis-aligned ചതുരം കണക്കാക്കുന്നു, അതിനാൽ ത്രികോണാകൃതിയിലുള്ള ശൂന്യ കോണുകൾ ചിത്രത്തെ വികൃതമാക്കാതെ നീക്കം ചെയ്യപ്പെടുന്നു.
4. 4
   ബ്രൗസർ കോഡെക് ഫലം എൻകോഡ് ചെയ്യുന്നു

   canvas.toBlob() പിക്സൽ ഡാറ്റ ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ ചിത്ര എൻകോഡറിലേക്ക് കൈമാറുന്നു, സുതാര്യ കോണുകൾക്ക് തിരഞ്ഞെടുക്കാവുന്ന ഗുണനിലവാരവും പശ്ചാത്തല ഫിൽ നിറവുമുള്ള ഒരു JPEG, PNG, അല്ലെങ്കിൽ WebP Blob നിർമ്മിക്കുന്നു, നിങ്ങൾ നേരിട്ട് ഡൗൺലോഡ് ചെയ്യുന്നു.

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