ഒരു ചിത്രം മുറിക്കുക _

ബ്രൗസർ അധിഷ്ഠിത ഇമേജ് ക്രോപ്പിംഗ് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ക്രോപ്പിംഗ് പ്രക്രിയ പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസർ ടാബിനുള്ളിൽ Canvas API ഉപയോഗിച്ച് നടക്കുന്നു. സെർവർ-സൈഡ് പ്രോസസ്സിംഗ് ഇല്ല, അപ്‌ലോഡുകൾ ഇല്ല, തേർഡ്-പാർട്ടി സേവനങ്ങൾ ഇല്ല. ഓരോ ഘട്ടവും നിങ്ങളുടെ ഉപകരണത്തിൽ നടക്കുന്നു.

1. ചിത്രം ഒരു <img> ഘടകത്തിലേക്ക് ലോഡ് ചെയ്യുക, അങ്ങനെ ബ്രൗസർ അത് പ്രാദേശികമായി ഡീകോഡ് ചെയ്യുന്നു. ഒരു കാൻവാസ് ഓവർലേ ചിത്രത്തെ വ്യൂപോർട്ടിന് അനുയോജ്യമായ രീതിയിൽ സ്കെയിൽ ചെയ്ത് റെൻഡർ ചെയ്യുന്നു, അതേസമയം ഡ്രാഗ് ചെയ്യാവുന്ന ഒരു സെലക്ഷൻ ദീർഘചതുരം നിലവിലെ ക്രോപ്പ് മേഖല കാണിക്കുന്നു.
2. ക്രോപ്പ് ഏരിയ ക്രമീകരിക്കുന്നതിന് ദീർഘചതുരത്തിന്റെ അറ്റങ്ങളിലോ കോണുകളിലോ വലിച്ചിടുക. ചിത്രത്തിന്റെ അതിരുകൾക്കുള്ളിൽ തന്നെ ദീർഘചതുരം നിയന്ത്രിക്കപ്പെടുന്നു, അതിനാൽ ചിത്രത്തിന് പുറത്ത് ഒരു മേഖല തിരഞ്ഞെടുക്കാൻ കഴിയില്ല. ഒരു നിശ്ചിത വീക്ഷണാനുപാതം സജീവമാകുമ്പോൾ (1:1, 16:9, 4:3), വലുപ്പം മാറ്റുന്നത് ആ അനുപാതം യാന്ത്രികമായി നിലനിർത്തുന്നു.
3. നിങ്ങൾ വലിച്ചിടുമ്പോൾ പിക്സൽ റീഡൗട്ട് തത്സമയം അപ്‌ഡേറ്റ് ചെയ്യുന്നു, ഇമേജ്-പിക്സൽ കോർഡിനേറ്റുകളിൽ നിലവിലെ ക്രോപ്പ് വീതി, ഉയരം, X, Y സ്ഥാനങ്ങൾ എന്നിവ കാണിക്കുന്നു. ഇത് ഊഹക്കച്ചവടമില്ലാതെ കൃത്യമായ അളവുകൾ ലക്ഷ്യമിടാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
4. നിങ്ങൾ Crop & Download ക്ലിക്ക് ചെയ്യുമ്പോൾ, പേജ് സോഴ്സ് ഇമേജിന്റെ തിരഞ്ഞെടുത്ത ഭാഗം മാത്രം ഒരു ഓഫ്‌സ്ക്രീൻ കാൻവാസിലേക്ക് യഥാർത്ഥ പിക്സൽ റെസല്യൂഷനിൽ വരയ്ക്കുന്നു, തുടർന്ന് canvas.toBlob() വഴി സോഴ്സ് ഫയലിന്റെ അതേ ഫോർമാറ്റിൽ ഫലം എക്‌സ്‌പോർട്ട് ചെയ്യുന്നു. ഡൗൺലോഡിനായി ഒരു Blob URL സൃഷ്ടിക്കപ്പെടുന്നു.

ചിത്രങ്ങൾ ഓൺലൈനായി എന്തുകൊണ്ട് മുറിക്കണം?

• ക്രോപ്പിംഗ് അനാവശ്യമായ അറ്റങ്ങൾ, ശൂന്യമായ ഇടം, അല്ലെങ്കിൽ ദൃശ്യ അലങ്കോലങ്ങൾ എന്നിവ ഇല്ലാതാക്കുന്നു. ഒരൊറ്റ ക്രോപ്പ് പാസ് പലപ്പോഴും ഏതൊരു ഫിൽട്ടറിനെക്കാളും നിറം ക്രമീകരണത്തെക്കാളും ഒരു ഫോട്ടോ കോമ്പോസിഷൻ മെച്ചപ്പെടുത്തുന്നു.
• പ്രസിദ്ധീകരണ പ്ലാറ്റ്ഫോമുകൾക്ക് വീക്ഷണാനുപാത നിയന്ത്രണം അത്യന്താപേക്ഷിതമാണ്. സോഷ്യൽ-മീഡിയ ഫീഡുകൾ പ്രൊഫൈലുകൾക്ക് 1:1, വീഡിയോ തംബ്‌നെയ്‌ലുകൾക്ക് 16:9, സ്റ്റാൻഡേർഡ് ഫോട്ടോഗ്രാഫിക്ക് 4:3 എന്നിവ പ്രതീക്ഷിക്കുന്നു. ശരിയായ അനുപാതത്തിൽ ക്രോപ്പ് ചെയ്യുന്നത് അപ്‌ലോഡ് സമയത്ത് വിചിത്രമായ ലെറ്റർബോക്സിംഗ് അല്ലെങ്കിൽ ക്രോപ്പ്-കട്ട്-ഓഫുകൾ ഒഴിവാക്കുന്നു.
• ഒരു ഫോട്ടോ എഡിറ്ററും ഇല്ലാത്ത ലോക്ക് ഡൗൺ ചെയ്ത കോർപ്പറേറ്റ് ഉപകരണങ്ങളിൽ ക്ലയന്റ്-സൈഡ് ക്രോപ്പിംഗ് മാത്രമാണ് ഏക ഓപ്ഷൻ. ഒന്നും അപ്‌ലോഡ് ചെയ്യാത്തതിനാൽ, ഡാറ്റ-ലീക്ക് സാധ്യതയില്ല, സെൻസിറ്റീവ് ഇമേജുകൾക്ക് കംപ്ലയിൻസ് അവലോകനം ആവശ്യമില്ല.
• തത്സമയ അളവ് റീഡൗട്ട് ഊഹക്കച്ചവടം ഇല്ലാതാക്കുന്നു. നിങ്ങൾ വലിച്ചിടുമ്പോൾ പിക്സൽ കോർഡിനേറ്റുകളും തിരഞ്ഞെടുപ്പിന്റെ വലുപ്പവും കാണുന്നു, അതിനാൽ ഒരു പിക്സൽ-മെഷർമെന്റ് ടൂളിലേക്ക് മാറാതെ തന്നെ കൃത്യമായ വീതിയിലും ഉയരത്തിലും ക്രോപ്പ് ചെയ്യാം.

സാധാരണ ക്രോപ്പിംഗ് പ്രയോഗങ്ങൾ

വെബ് പ്രസിദ്ധീകരണം, സോഷ്യൽ മീഡിയ, സോഫ്റ്റ്‌വെയർ വികസനം എന്നിവയിലുടനീളം ക്രോപ്പിംഗ് ഏറ്റവും സാധാരണമായ ഇമേജ് എഡിറ്റുകളിൽ ഒന്നാണ്. ഒരു ബ്രൗസർ അധിഷ്ഠിത ക്രോപ്പർ സമയം ലാഭിക്കുന്ന മൂന്ന് പാറ്റേണുകൾ ഇതാ.

• ഓൺലൈൻ സ്റ്റോറിനായി ഉൽപ്പന്ന ഫോട്ടോകൾ തയ്യാറാക്കൽ. ഓരോ ലിസ്റ്റിംഗ് തംബ്‌നെയ്‌ലും ഗ്രിഡിൽ വിന്യസിക്കുന്നതിന് സ്ഥിരമായ 1:1 അല്ലെങ്കിൽ 4:5 വീക്ഷണാനുപാതത്തിൽ ക്രോപ്പ് ചെയ്യുക. എക്‌സ്‌പോർട്ട് യഥാർത്ഥ ഫോർമാറ്റ് നിലനിർത്തുന്നു, അതിനാൽ JPEG ഉൽപ്പന്ന ചിത്രങ്ങൾ JPEG ആയി തന്നെ തുടരുന്നു.
• ഡോക്യുമെന്റേഷനോ ബഗ് റിപ്പോർട്ടുകൾക്കോ വേണ്ടിയുള്ള സ്‌ക്രീൻഷോട്ടുകൾ ട്രിം ചെയ്യൽ. ഒരു ടിക്കറ്റിലോ പുൾ റിക്വസ്റ്റിലോ ചിത്രം അറ്റാച്ച് ചെയ്യുന്നതിന് മുമ്പ് ബ്രൗസർ ടൂൾബാർ, വിൻഡോസ് ടാസ്‌ക്ബാർ അല്ലെങ്കിൽ സെൻസിറ്റീവ് അറിയിപ്പുകൾ മുറിച്ചുമാറ്റുക.
• ലാൻഡിംഗ് പേജിനായി ഒരു ഹീറോ ഇമേജോ ബാനറോ ഫ്രെയിം ചെയ്യൽ. 16:9 പ്രീസെറ്റ് ലോക്ക് ചെയ്യുക, ഫോട്ടോയുടെ ഏറ്റവും പ്രധാനപ്പെട്ട ഭാഗം ക്രോപ്പ് ദീർഘചതുരത്തിന്റെ മധ്യത്തിൽ സ്ഥാപിക്കുക, റെറ്റിന ഡിസ്പ്ലേകളിൽ മികച്ച നിലവാരത്തിനായി യഥാർത്ഥ റെസല്യൂഷനിൽ എക്‌സ്‌പോർട്ട് ചെയ്യുക.

ഒരു പ്രായോഗിക ഉദാഹരണം: 4000×3000 ഫോട്ടോ 1200×675 ആയി ഹീറോ ബാനറിനായി മുറിക്കുന്നു

ഒരു ഡിജിറ്റൽ ക്യാമറയിൽ നിന്നുള്ള 4000×3000 പിക്സൽ ഫോട്ടോ ഒരു സാധാരണ വെബ് ഹീറോ ബാനറിന് വളരെ വലുതാണ്. ബാനർ സ്‌പേസ് 1200×675 (16:9 ഫ്രെയിം) ആയിരിക്കാം.

ഫോട്ടോ അപ്‌ലോഡ് സോണിലേക്ക് ഇടുക. ചിത്രം പൂർണ്ണ റെസല്യൂഷനിൽ ലോഡ് ചെയ്യുന്നു, പക്ഷേ സുഖകരമായ ഡ്രാഗ് ഇന്ററാക്ഷനായി വ്യൂപോർട്ടിന് അനുയോജ്യമായി സ്കെയിൽ ചെയ്യുന്നു. 16:9 വീക്ഷണാനുപാത പ്രീസെറ്റ് തിരഞ്ഞെടുക്കുക. ക്രോപ്പ് ദീർഘചതുരം ഉടനടി ചിത്രത്തിന് അനുയോജ്യമായ ഏറ്റവും വലിയ 16:9 മേഖലയിലേക്ക് സ്നാപ്പ് ചെയ്യുന്നു. ഫോക്കൽ പോയിന്റ് — ഒരു പർവതശിഖരം, ഒരു ഉൽപ്പന്നം, ഒരു വ്യക്തിയുടെ മുഖം — ഫ്രെയിമിൽ സ്ഥാപിക്കാൻ ദീർഘചതുരം വലിച്ചിടുക. തത്സമയ റീഡൗട്ട് 4000×2250 (പൂർണ്ണ-ഇമേജ് 16:9 വിൻഡോ) എന്നതിൽ നിലവിലെ തിരഞ്ഞെടുപ്പ് കാണിക്കുന്നു. വീതി റീഡൗട്ട് 1200 px എത്തുന്നതുവരെ ഒരു കോർണർ ഹാൻഡിൽ പിടിച്ച് അകത്തേക്ക് വലിച്ചിടുക. അനുപാതം ലോക്ക് ചെയ്തിരിക്കുന്നതിനാൽ ഉയരം യാന്ത്രികമായി പിന്തുടരുന്നു. Crop & Download ക്ലിക്ക് ചെയ്യുക. പേജ് യഥാർത്ഥ പിക്സലുകളിൽ നിന്ന് തിരഞ്ഞെടുത്ത 1200×675 മേഖല എക്‌സ്‌ട്രാക്റ്റ് ചെയ്ത് സോഴ്സ് ഫോർമാറ്റിൽ ക്രോപ്പ് ചെയ്ത ഫയൽ നൽകുന്നു. മുഴുവൻ റൗണ്ട്-ട്രിപ്പിനും ഒന്നോ രണ്ടോ സെക്കൻഡ് എടുക്കും, പ്രാരംഭ പേജ് ലോഡിനപ്പുറം നെറ്റ്‌വർക്ക് ബാൻഡ്‌വിഡ്ത്ത് ഉപയോഗിക്കുന്നില്ല.

ക്രോപ്പിംഗിനായി ഏത് ഇമേജ് ഫോർമാറ്റുകളാണ് പിന്തുണയ്ക്കുന്നത്?

ബ്രൗസറിന് ഡീകോഡ് ചെയ്യാൻ കഴിയുന്ന ഏത് ഫോർമാറ്റും ടൂൾ സ്വീകരിക്കുന്നു: PNG, JPEG, WebP എന്നിവ ഏതാണ്ട് എല്ലാ യഥാർത്ഥ ലോക ഉപയോഗ കേസുകളും ഉൾക്കൊള്ളുന്നു. ക്രോപ്പ് ചെയ്ത ഔട്ട്പുട്ട് സോഴ്സ് ഫയലിന്റെ അതേ ഫോർമാറ്റിൽ സംരക്ഷിക്കപ്പെടുന്നു. PNG നഷ്ടമില്ലാതെ തുടരുന്നു, JPEG അതിന്റെ യഥാർത്ഥ ഗുണനിലവാര നില നിലനിർത്തുന്നു, WebP WebP ആയി തുടരുന്നു. ഫോർമാറ്റ് സോഴ്സ് ഫയലിന്റെ MIME തരത്തിൽ നിന്ന് കണ്ടെത്തുന്നു.

ക്രോപ്പിംഗ് ഇമേജ് ഫയൽ വലുപ്പം കുറയ്ക്കുമോ?

ക്രോപ്പിംഗ് പിക്സലുകൾ നീക്കം ചെയ്യുന്നു, അതിനാൽ ഔട്ട്പുട്ടിന്റെ ഫയൽ വലുപ്പം സാധാരണയായി സോഴ്സിനേക്കാൾ ചെറുതാണ്, പ്രത്യേകിച്ചും നിങ്ങൾ ഒരു വലിയ ബോർഡറോ ശൂന്യമായ ഏരിയയോ മുറിച്ചുമാറ്റുമ്പോൾ. എക്‌സ്‌പോർട്ട് യഥാർത്ഥ ഫയൽ ഫോർമാറ്റും അതിന്റെ എൻകോഡിംഗ് പാരാമീറ്ററുകളും ഉപയോഗിക്കുന്നു — PNG നഷ്ടമില്ലാതെ തുടരുന്നു, JPEG അതിന്റെ യഥാർത്ഥ ഗുണനിലവാര ക്രമീകരണം നിലനിർത്തുന്നു — അതിനാൽ പിക്സൽ എണ്ണം കുറയുന്നതിൽ നിന്ന് മാത്രമേ ലാഭം ലഭിക്കൂ, വീണ്ടും കംപ്രസ് ചെയ്യുന്നതിൽ നിന്നല്ല.

വീക്ഷണാനുപാത പ്രീസെറ്റുകൾ എന്താണ് ചെയ്യുന്നത്?

പ്രീസെറ്റുകൾ (1:1, 16:9, 4:3, 3:2, 9:16) ക്രോപ്പ് ദീർഘചതുരത്തിന്റെ വീതി-ഉയരം അനുപാതം ലോക്ക് ചെയ്യുന്നു. ഒരു പ്രീസെറ്റ് സജീവമാകുമ്പോൾ, ഏതെങ്കിലും കോണിലോ അറ്റത്തോ ഉള്ള ഹാൻഡിൽ വലിച്ചിടുന്നത് അനുപാതം സ്ഥിരമായി നിലനിർത്തിക്കൊണ്ട് തിരഞ്ഞെടുപ്പിന്റെ വലുപ്പം ക്രമീകരിക്കുന്നു. ഫ്രീ മോഡിലേക്ക് മാറുന്നത് നിയന്ത്രണം നീക്കം ചെയ്യുന്നു, അതിനാൽ നിങ്ങൾക്ക് ദീർഘചതുരം ക്രമരഹിതമായി വലുപ്പം മാറ്റാം. അനുപാതം ഇമേജ്-പിക്സൽ കോർഡിനേറ്റുകളിൽ നടപ്പിലാക്കുന്നു, അതിനാൽ എക്‌സ്‌പോർട്ട് ചെയ്ത ഔട്ട്പുട്ടിന് നിങ്ങൾ തിരഞ്ഞെടുത്ത കൃത്യമായ വീക്ഷണാനുപാതം ഉണ്ടായിരിക്കും.

ചിത്രം ഒരു സെർവറിലേക്ക് അപ്‌ലോഡ് ചെയ്യുന്നുണ്ടോ?

ഇല്ല. ചിത്രം ഒരിക്കലും നിങ്ങളുടെ ഉപകരണം വിട്ടുപോകുന്നില്ല. ചിത്രം മെമ്മറിയിലേക്ക് വായിക്കാൻ പേജ് ബ്രൗസറിന്റെ File API ഉം ഫലം ക്രോപ്പ് ചെയ്ത് എക്‌സ്‌പോർട്ട് ചെയ്യാൻ Canvas API ഉം ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ ബ്രൗസറിന്റെ DevTools Network പാനൽ തുറന്ന് ഇത് പരിശോധിക്കാം — ക്രോപ്പിംഗ് സമയത്ത് പുറത്തേക്കുള്ള അഭ്യർത്ഥനകൾ പ്രാരംഭ പേജ് ലോഡും പരസ്യ കോളുകളും മാത്രമാണ്. ഒരു ഇമേജ് ഡാറ്റയും കൈമാറ്റം ചെയ്യപ്പെടുന്നില്ല.

കൃത്യമായ പിക്സൽ കോർഡിനേറ്റുകൾ നൽകി ഒരു നിർദ്ദിഷ്ട ഏരിയ ക്രോപ്പ് ചെയ്യാൻ കഴിയുമോ?

നിലവിലെ പതിപ്പ് ഇമേജ് പ്രിവ്യൂവിൽ ഡ്രാഗ് ഇന്ററാക്ഷൻ വഴി ക്രോപ്പ് ദീർഘചതുരം ക്രമീകരിക്കുന്നു. തിരഞ്ഞെടുപ്പിന്റെ X, Y, വീതി, ഉയരം എന്നിവയ്ക്കായി നിങ്ങൾക്ക് തത്സമയ പിക്സൽ കോർഡിനേറ്റുകൾ വായിക്കാം. ക്രോപ്പ് ദീർഘചതുരത്തിനായുള്ള നേരിട്ടുള്ള സംഖ്യാ ഇൻപുട്ട് v1-ൽ ലഭ്യമല്ല, എന്നാൽ ഭാവി അപ്‌ഡേറ്റിനായി ആസൂത്രണം ചെയ്ത മെച്ചപ്പെടുത്തലാണ്.

യഥാർത്ഥ ചിത്രത്തിന് എന്ത് സംഭവിക്കും?

യഥാർത്ഥ ഫയൽ നിങ്ങളുടെ ഉപകരണത്തിൽ തുടരുന്നു. പേജ് അത് ബ്രൗസർ മെമ്മറിയിലേക്ക് പ്രദർശനത്തിനും ക്രോപ്പിംഗിനുമായി വായിക്കുന്നു, പക്ഷേ ഡിസ്കിലെ സോഴ്സ് ഫയലിൽ ഒരിക്കലും മാറ്റം വരുത്തുന്നില്ല. ക്രോപ്പ് ചെയ്ത ഔട്ട്പുട്ട് നിങ്ങൾ പ്രത്യേകം ഡൗൺലോഡ് ചെയ്യുന്ന ഒരു പുതിയ ഫയലാണ്. യഥാർത്ഥം നിങ്ങളുടെ കമ്പ്യൂട്ടറിലോ ഫോണിലോ അതിന്റെ യഥാർത്ഥ സ്ഥാനത്ത് കേടുകൂടാതെ തുടരുന്നു.

ക്രോപ്പിംഗിന് ഫയൽ വലുപ്പ പരിധി ഉണ്ടോ?

താഴ്ന്ന ശേഷിയുള്ള ഉപകരണങ്ങളിൽ ബ്രൗസർ മെമ്മറി നിയന്ത്രണത്തിലാക്കാൻ ടൂൾ അപ്‌ലോഡ് സോണിൽ ഒരു ഫയലിന് 30 MB പരിധി പാലിക്കുന്നു. നിങ്ങളുടെ ചിത്രം 30 MB-യിൽ കൂടുതലാണെങ്കിൽ, ഇവിടെ ലോഡ് ചെയ്യുന്നതിന് മുമ്പ് ഒരു പ്രത്യേക ഇമേജ് റീസൈസർ ടൂൾ ഉപയോഗിച്ച് ആദ്യം അതിന്റെ വലുപ്പം മാറ്റാം.

മൊബൈൽ ഫോണുകളിലും ടാബ്‌ലെറ്റുകളിലും ക്രോപ്പിംഗ് പ്രവർത്തിക്കുമോ?

അതെ. ക്രോപ്പ് ഹാൻഡിലുകൾ ടച്ച് ടാർഗെറ്റുകൾ മനസ്സിൽ വച്ച് വലുപ്പം ക്രമീകരിച്ചിരിക്കുന്നു, കൂടാതെ ഇന്ററാക്ഷൻ മൗസ് ക്ലിക്കുകളിലും ഫിംഗർ ടാപ്പുകളിലും പ്രവർത്തിക്കുന്ന പോയിന്റർ ഇവന്റുകൾ ഉപയോഗിക്കുന്നു. ഒരു ഫോൺ സ്‌ക്രീനിൽ ഇമേജ് പ്രിവ്യൂ ലഭ്യമായ വീതിയുമായി പൊരുത്തപ്പെടുന്നു, കൂടാതെ നിയന്ത്രണങ്ങൾ എളുപ്പത്തിൽ ഒറ്റക്കൈ ഉപയോഗത്തിനായി ലംബമായി അടുക്കുന്നു.