ஒரு படத்தைக் க்ராப் செய்யுங்கள் _

உலாவி-சார்ந்த பட க்ராப்பிங் எவ்வாறு செயல்படுகிறது

க்ராப்பிங் செயல்முறை Canvas API ஐப் பயன்படுத்தி முழுமையாக உங்கள் உலாவி தாவலுக்குள் இயங்குகிறது. சர்வர்-சைடு செயலாக்கம் இல்லை, பதிவேற்றங்கள் இல்லை, மூன்றாம் தரப்பு சேவைகள் இல்லை. ஒவ்வொரு படியும் உங்கள் சாதனத்தில் நடைபெறுகிறது.

1. படத்தை <img> உறுப்பில் ஏற்றவும், இதனால் உலாவி அதை உள்ளூரில் டிகோட் செய்கிறது. ஒரு கேன்வாஸ் மேலடுக்கு காட்சிப்பகுதியில் பொருந்த படத்தை அளவிடச் செய்து வழங்குகிறது, அதே நேரத்தில் இழுக்கக்கூடிய தேர்வு செவ்வகம் தற்போதைய க்ராப் பகுதியைக் காட்டுகிறது.
2. செவ்வகத்தை அதன் விளிம்புகள் அல்லது மூலைகள் வழியாக இழுத்து க்ராப் பகுதியைச் சரிசெய்யவும். செவ்வகம் படத்தின் எல்லைகளுக்குப் பிணைக்கப்பட்டுள்ளது, எனவே நீங்கள் படத்திற்கு வெளியே ஒரு பகுதியைத் தேர்ந்தெடுக்க முடியாது. ஒரு நிலையான தோற்ற விகிதம் (1:1, 16:9, 4:3) செயலில் இருக்கும்போது, அளவு மாற்றம் அந்த விகிதத்தைத் தானாகப் பாதுகாக்கிறது.
3. நீங்கள் இழுக்கும்போது பிக்செல் அளவீடு நேரலையில் புதுப்பிக்கப்படுகிறது, இது பட-பிக்செல் ஆயங்களில் தற்போதைய க்ராப் அகலம், உயரம், X மற்றும் Y நிலைகளைக் காட்டுகிறது. இது யூகமின்றி துல்லியமான பரிமாணங்களை இலக்காகக் கொள்ள உங்களை அனுமதிக்கிறது.
4. நீங்கள் க்ராப் செய்து பதிவிறக்குங்கள் என்பதைக் கிளிக் செய்யும்போது, பக்கம் மூலப் படத்தின் தேர்ந்தெடுக்கப்பட்ட பகுதியை மட்டும் அசல் பிக்செல் தெளிவுத்திறனில் ஒரு ஆஃப்ஸ்கிரீன் கேன்வாஸில் வரைந்து, பின்னர் canvas.toBlob() மூலம் மூலக் கோப்பின் அதே வடிவத்தில் முடிவை ஏற்றுமதி செய்கிறது. பதிவிறக்கத்திற்காக Blob URL உருவாக்கப்படுகிறது.

ஏன் ஆன்லைனில் படங்களைக் க்ராப் செய்ய வேண்டும்?

• க்ராப்பிங் தேவையற்ற விளிம்புகள், வெற்று இடம் அல்லது காட்சி குழப்பத்தை நீக்குகிறது. ஒற்றை க்ராப் பாஸ் பெரும்பாலும் எந்த வடிகட்டி அல்லது வண்ணச் சரிசெய்தலை விட புகைப்பட அமைப்பை மேம்படுத்துகிறது.
• தோற்ற விகிதக் கட்டுப்பாடு வெளியீட்டு தளங்களுக்கு இன்றியமையாதது. சமூக-ஊடக ஊட்டங்கள் சுயவிவரங்களுக்கு 1:1, வீடியோ சிறுபடங்களுக்கு 16:9 மற்றும் நிலையான புகைப்படத்திற்கு 4:3 ஐ எதிர்பார்க்கின்றன. சரியான விகிதத்தில் க்ராப் செய்வது பதிவேற்றும்போது வினோதமான லெட்டர்பாக்சிங் அல்லது க்ராப்-கட்-ஆஃப்பைத் தவிர்க்கிறது.
• கிளையன்ட்-சைடு க்ராப்பிங் என்பது புகைப்படத் திருத்தி இல்லாத பூட்டப்பட்ட கார்ப்பரேட் சாதனங்களில் ஒரே வழியாகும். எதுவும் பதிவேற்றப்படாததால், உணர்திறன் வாய்ந்த படங்களுக்கு தரவு-கசிவு அபாயமோ அல்லது இணக்க மதிப்பாய்வோ தேவையில்லை.
• நேரடி பரிமாண அளவீடு யூகத்தை நீக்குகிறது. இழுக்கும்போது பிக்செல் ஆயங்களையும் தேர்வு அளவையும் நீங்கள் பார்க்கிறீர்கள், எனவே பிக்செல்-அளவீட்டு கருவிக்கு மாறாமலேயே துல்லியமான அகலம் மற்றும் உயரத்திற்குக் க்ராப் செய்யலாம்.

பொதுவான க்ராப்பிங் பயன்பாடுகள்

க்ராப்பிங் என்பது இணைய வெளியீடு, சமூக ஊடகம் மற்றும் மென்பொருள் மேம்பாடு ஆகியவற்றில் மிகவும் பொதுவான படத் திருத்தங்களில் ஒன்றாகும். உலாவி-சார்ந்த க்ராப்பர் நேரத்தை மிச்சப்படுத்தும் மூன்று முறைகள் இங்கே உள்ளன.

• ஆன்லைன் கடைக்கான தயாரிப்பு புகைப்படங்களைத் தயாரித்தல். நிலையான 1:1 அல்லது 4:5 தோற்ற விகிதத்தில் க்ராப் செய்யுங்கள், இதனால் ஒவ்வொரு பட்டியல் சிறுபடமும் கட்டத்தில் சீரமைக்கப்படும். ஏற்றுமதி அசல் வடிவத்தைப் பாதுகாக்கிறது, எனவே JPEG தயாரிப்பு படங்கள் JPEG ஆகவே இருக்கும்.
• ஆவணப்படுத்தல் அல்லது பிழை அறிக்கைகளுக்கான ஸ்கிரீன்ஷாட்களை ஒழுங்கமைத்தல். படத்தை டிக்கெட் அல்லது புல் ரிக்வெஸ்ட்டில் இணைப்பதற்கு முன் உலாவி கருவிப்பட்டி, Windows பணிப்பட்டி அல்லது உணர்திறன் அறிவிப்புகளைக் க்ராப் செய்யுங்கள்.
• லேண்டிங் பேஜுக்கான ஹீரோ படம் அல்லது பேனரைச் சட்டமிடுதல். 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 ஐ விடப் பெரியதாக இருந்தால், அதைக் க்ராப் செய்வதற்கு இங்கே ஏற்றுவதற்கு முன் ஒரு பிரத்யேக பட அளவுமாற்றி கருவியைப் பயன்படுத்தி முதலில் அளவை மாற்றலாம்.

க்ராப்பிங் மொபைல் போன்கள் மற்றும் டேப்லெட்டுகளில் வேலை செய்கிறதா?

ஆம். க்ராப் கைப்பிடிகள் தொடு இலக்குகளை மனதில் கொண்டு அளவிடப்பட்டுள்ளன, மேலும் தொடர்பு சுட்டி நிகழ்வுகளைப் பயன்படுத்துகிறது, இது சுட்டி கிளிக்குகள் மற்றும் விரல் தட்டுதல் இரண்டிலும் செயல்படுகிறது. தொலைபேசித் திரையில் பட முன்னோட்டம் கிடைக்கும் அகலத்திற்கு ஏற்றவாறு மாறுகிறது, மேலும் கட்டுப்பாடுகள் எளிதான ஒரு-கை பயன்பாட்டிற்கு செங்குத்தாக அடுக்கப்படுகின்றன.