முகமூடி படத்திற்கு தனிப்பயன் பார்டரைச் சேர்க்க ஜாவாஸ்கிரிப்ட் கேன்வாஸை எவ்வாறு பயன்படுத்துவது

ஜாவாஸ்கிரிப்ட் கேன்வாஸில் மாஸ்டரிங் மாஸ்க்டு இமேஜ் பார்டர்ஸ்

ஜாவாஸ்கிரிப்ட் விஷுவல் எஃபெக்ட்ஸ் உருவாக்கத்தில் பல பட இணைவு ஒரு பொதுவான படியாகும். முகமூடியுடன் ஒரு படத்தைப் பார்க்கக்கூடிய பகுதிகளை வரையறுப்பது ஒரு பொதுவான நுட்பமாகும். தனித்துவமான வடிவங்களை உருவாக்க இது உதவியாக இருந்தாலும், அந்த முகமூடி வடிவங்களைச் சுற்றி ஒரு பார்டரைச் சேர்ப்பது சவாலாக இருக்கலாம். என்றாலும் ஜாவாஸ்கிரிப்டில் உள்ள உறுப்பு விரிவான பட கையாளுதலை வழங்குகிறது, முகமூடி செய்யப்பட்ட படத்தைச் சுற்றியுள்ள எல்லையை சரிசெய்வது எளிதானது அல்ல.

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

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

கேன்வாஸில் கலப்பு செயல்பாடுகளுடன் எவ்வாறு வேலை செய்வது என்பதைக் கற்றுக்கொள்வதன் மூலம் எல்லையின் தோற்றத்தை நீங்கள் நன்றாக மாற்றலாம். முகமூடி செய்யப்பட்ட படத்தைச் சுற்றி தேவையான பார்டரைச் சேர்க்க ஜாவாஸ்கிரிப்ட்டின் கேன்வாஸ் அம்சங்களை எவ்வாறு பயன்படுத்துவது என்பதைப் பார்ப்போம்.

கட்டளை	பயன்பாட்டின் உதாரணம்
globalCompositeOperation	கேன்வாஸில் வரைதல் செயல்களின் கலவை இந்த அம்சத்தால் வரையறுக்கப்படுகிறது. எடுத்துக்காட்டில் உள்ள globalCompositeOperation ='source-in' ஆனது முகமூடிப் படம் பிரதான படத்தைக் கிளிப் செய்கிறது, அதனால் வெட்டும் பகுதிகள் மட்டுமே தெரியும்.
toDataURL()	கேன்வாஸின் தகவலை Base64 உடன் குறியிடப்பட்ட படமாக மாற்றுகிறது. முகமூடி மற்றும் பார்டரைப் பயன்படுத்திய பிறகு முடிக்கப்பட்ட படத்தை PNG ஆகப் பயன்படுத்துவதை இது சாத்தியமாக்குகிறது. உதாரணத்தின் பட வெளியீடு canvas.toDataURL('image/png') ஐப் பயன்படுத்தி உருவாக்கப்படுகிறது.
crossOrigin	கேன்வாஸில் வேறு டொமைனில் இருந்து ஏற்றப்பட்ட படங்களைப் பயன்படுத்துவதை இயக்குவதன் மூலம் இந்த அம்சம் பாதுகாப்புக் கட்டுப்பாடுகளை மதிக்கிறது. MaskImg.crossOrigin = 'அநாமதேய' CORS பிரச்சனைகளை ஏற்படுத்தாமல் முகமூடி படத்தை அணுக முடியும் என்று உத்தரவாதம் அளிக்கிறது.
beginPath()	கேன்வாஸில், இந்த முறையைப் பயன்படுத்தி ஒரு புதிய பாதையைத் தொடங்கலாம். இரண்டாவது முறை ctx.beginPath() ஐ அழைக்கிறது, இது முகமூடியின் உருவத்தை சுற்றி ஒரு தனிப்பயன் எல்லையை வரையும்போது, ​​முகமூடியின் விளிம்புடன் பாதை ஒட்டிக்கொண்டிருப்பதை உறுதிப்படுத்துகிறது.
moveTo()	இந்த நடைமுறை மூலம், எந்த வரைபடங்களும் செய்யப்படவில்லை; அதற்கு பதிலாக, "பேனா" ஒரு புதிய தொடக்க இடத்திற்கு நகர்த்தப்பட்டது. ctx.moveTo(0, 0) ஐப் பயன்படுத்தி பார்டரின் தொடக்கப் புள்ளியானது, முகமூடியின் எல்லைகளைச் சுற்றி எல்லையைத் துல்லியமாக வரைவதற்கு இன்றியமையாதது.
lineTo()	கொடுக்கப்பட்ட ஆயங்களை ஒரு தொடக்க புள்ளியாகப் பயன்படுத்தி, இந்த நுட்பம் ஒரு நேர் கோட்டை வரைகிறது. முகமூடி செய்யப்பட்ட படத்தின் எல்லையானது ctx.lineTo(maskImg.width, 0) ஐப் பயன்படுத்தி கரைசலில் வரையப்பட்ட கோடுகளால் வரையறுக்கப்படுகிறது.
stroke()	நியமிக்கப்பட்ட பாதையில், எல்லைகள் அல்லது கோடுகளை வரைகிறது. எடுத்துக்காட்டாக, மாஸ்க் படிவத்தை வரையறுக்க moveTo() மற்றும் lineTo() பயன்படுத்தப்படுகின்றன, பின்னர் ctx.stroke() முகமூடி செய்யப்பட்ட படத்தைச் சுற்றி எல்லையைப் பயன்படுத்த பயன்படுகிறது.
lineWidth	கேன்வாஸில் கோடுகள் எவ்வளவு தடிமனாக வரையப்பட்டுள்ளன என்பதை தீர்மானிக்கிறது. ctx.lineWidth = 5 ஐப் பயன்படுத்தி முகமூடியின் வடிவத்தைச் சுற்றி 5-பிக்சல் தடிமனான பார்டரை ஸ்கிரிப்ட் நிறுவுகிறது.
strokeStyle	எல்லையின் நிறம் அல்லது பாணியைக் குறிக்கிறது. எடுத்துக்காட்டில் உள்ள பார்டர் வண்ணம் ctx.strokeStyle ='red' ஐப் பயன்படுத்தி சிவப்பு நிறமாக அமைக்கப்பட்டுள்ளது.

ஒரு முகமூடி படத்திற்கு ஒரு பார்டரை எவ்வாறு பயன்படுத்துவது என்பதை அங்கீகரித்தல்

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

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

முகமூடி செய்யப்பட்ட வடிவத்திற்கு ஒரு பார்டரைப் பயன்படுத்துவதை உள்ளடக்கியது நுட்பம். கேன்வாஸில் குறிப்பிடப்பட்ட பாதை அல்லது வடிவம் இந்த கட்டளையால் குறிக்கப்படுகிறது. இரண்டாவது தீர்வில், கேன்வாஸ் பாதையை கைமுறையாக உருவாக்க மற்றும் முகமூடியின் எல்லைகளைக் கண்டறிய, moveTo() மற்றும் lineTo() ஆகியவை இணைக்கப்படுகின்றன. இந்த நுட்பங்களைப் பயன்படுத்துவதன் மூலம், நீங்கள் எல்லையின் வடிவத்தை கைமுறையாகக் குறிப்பிடலாம் மற்றும் செவ்வக கேன்வாஸ் எல்லையை விட முகமூடியின் வடிவத்துடன் ஒட்டிக்கொண்டிருப்பதை உறுதிசெய்யலாம். எல்லையின் தோற்றத்தின் மீது உங்களுக்கு முழுமையான கட்டுப்பாடு உள்ளது, ஏனெனில் சொத்து எல்லையின் தடிமன் மற்றும் தி சொத்து அதன் நிறத்தை அமைக்கிறது.

கடைசியாக, கேன்வாஸை Base64 சரமாக மாற்ற toDataURL() செயல்பாடு பயன்படுத்தப்படுகிறது. இதைச் செய்வதன் மூலம், முடிக்கப்பட்ட படம் - முகமூடி மற்றும் எல்லை உள்ளிட்டவை - நிரலின் பிற பகுதிகளில் உடனடியாகப் பயன்படுத்தப்படும் அல்லது சேவையகத்தில் பதிவேற்றப்படும் வடிவமைப்பாக மாற்றப்படுகிறது. நேரத் தவறுகளைத் தவிர்க்க, இரண்டு படங்களும் முழுமையாக ஏற்றப்பட்டால் மட்டுமே இந்தச் செயல்பாடு முடிவடையும் என்பதை உறுதிமொழி உறுதி செய்கிறது. இந்த ஸ்கிரிப்டுகள் ஜாவாஸ்கிரிப்ட்டின் கேன்வாஸ் உறுப்புடன் துல்லியமாக முகமூடியின் வரையறைகளுடன் பொருந்தக்கூடிய டைனமிக் பார்டரை மறைத்தல் மற்றும் பயன்படுத்துதல் உள்ளிட்ட அதிநவீன பட மாற்ற உத்திகள் எப்படிச் செய்யப்படுகின்றன என்பதைக் காட்டுகின்றன.

function applyFiltersAndConvertToBase64(imageUrl, materialImage) {
    return new Promise((resolve, reject) => {
        const maskImg = new Image();
        const mainImg = new Image();
        maskImg.crossOrigin = "anonymous";
        mainImg.crossOrigin = "anonymous";
        let imagesLoaded = 0;
        const onLoad = () => {
            imagesLoaded++;
            if (imagesLoaded === 2) {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = maskImg.width;
                canvas.height = maskImg.height;
                ctx.drawImage(maskImg, 0, 0);
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(mainImg, 0, 0, maskImg.width, maskImg.height);
                ctx.globalCompositeOperation = 'source-over';
                ctx.lineWidth = 5; // Border thickness
                ctx.strokeStyle = 'red'; // Border color
                ctx.stroke(); // Draw border around mask
                const base64Image = canvas.toDataURL('image/png');
                resolve(base64Image);
            }
        };
        maskImg.onload = onLoad;
        mainImg.onload = onLoad;
        maskImg.onerror = reject;
        mainImg.onerror = reject;
        maskImg.src = imageUrl;
        mainImg.src = materialImage;
    });
}

function applyFiltersAndConvertToBase64(imageUrl, materialImage) {
    return new Promise((resolve, reject) => {
        const maskImg = new Image();
        const mainImg = new Image();
        maskImg.crossOrigin = "anonymous";
        mainImg.crossOrigin = "anonymous";
        let imagesLoaded = 0;
        const onLoad = () => {
            imagesLoaded++;
            if (imagesLoaded === 2) {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = maskImg.width;
                canvas.height = maskImg.height;
                ctx.drawImage(maskImg, 0, 0);
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(mainImg, 0, 0, maskImg.width, maskImg.height);
                ctx.globalCompositeOperation = 'source-over';
                // Create path for the mask shape
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(maskImg.width, 0);
                ctx.lineTo(maskImg.width, maskImg.height);
                ctx.lineTo(0, maskImg.height);
                ctx.closePath();
                ctx.lineWidth = 5; // Border thickness
                ctx.strokeStyle = 'blue'; // Border color
                ctx.stroke(); // Apply the border along the path
                const base64Image = canvas.toDataURL('image/png');
                resolve(base64Image);
            }
        };
        maskImg.onload = onLoad;
        mainImg.onload = onLoad;
        maskImg.onerror = reject;
        mainImg.onerror = reject;
        maskImg.src = imageUrl;
        mainImg.src = materialImage;
    });
}

ஜாவாஸ்கிரிப்டில் தனிப்பயன் பார்டர்களுடன் முகமூடி படங்களை மேம்படுத்துதல்

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

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

செயல்திறன் கணக்கில் எடுத்துக்கொள்ள வேண்டிய மற்றொரு முக்கியமான காரணியாகும், குறிப்பாக பெரிய படங்களுடன் பணிபுரியும் போது அல்லது நிகழ்நேரத்தில் மாறும் வகையில் எல்லைகளைப் பயன்படுத்தும்போது. மாஸ்க் செய்யப்பட்ட படத்தை தேக்ககப்படுத்துதல், வரைதல் செயல்பாடுகளை குறைத்தல் மற்றும் கேன்வாஸ் ரெண்டரிங் செயல்முறையை நெறிப்படுத்துதல் போன்ற உத்திகளைப் பயன்படுத்துவதன் மூலம் உங்கள் பயன்பாட்டின் வேகத்தை மேம்படுத்தலாம். சிக்கலான அல்லது உயர்-செயல்திறன் அமைப்புகளில் கூட, அர்த்தமற்ற செயல்களைக் குறைப்பதன் மூலம் மறைத்தல் மற்றும் எல்லை வரைதல் நடைமுறைகள் சீராகச் செல்லும் என்று நீங்கள் உத்தரவாதம் அளிக்கலாம்.

1. ஜாவாஸ்கிரிப்ட்டில், ஒரு படத்தை மறைக்க மற்றொரு படத்தை எவ்வாறு பயன்படுத்துவது?
2. பயன்படுத்தி அமைக்கப்பட்டுள்ளது , ஒரு படத்தைப் பயன்படுத்தி முகமூடியை முகமூடியை கேன்வாஸில் வரையவும் . முகமூடியைப் பொருத்த, இது முதன்மைப் படத்தைச் செதுக்கும்.
3. முகமூடி அணிந்த படத்திற்கு அதன் வடிவத்திற்கு ஏற்றவாறு பார்டரை உருவாக்குவது எப்படி?
4. முகமூடியின் வழியை நிறுவிய பிறகு மற்றும் , பயன்படுத்தவும் நுட்பம். தனிப்பயனாக்கப்பட்ட பார்டருடன் முகமூடியின் வடிவத்தைச் சுற்றிக்கொள்ள இது உங்களை அனுமதிக்கும்.
5. நோக்கம் என்ன கேன்வாஸ் கையாளுதலில்?
6. கேன்வாஸின் உள்ளடக்கமானது Base64-குறியீடு செய்யப்பட்ட படமாக மாற்றப்படுகிறது செயல்பாடு, PNG படமாக பயன்படுத்த அல்லது விநியோகிக்க எளிதாக்குகிறது.
7. செயல்திறனுக்காக கேன்வாஸ் செயல்பாடுகளை எவ்வாறு மேம்படுத்துவது?
8. வரைதல் செயல்பாடுகளின் அளவைக் குறைத்து, கேன்வாஸ் வேகத்தை அதிகரிக்க பொதுவாகப் பயன்படுத்தப்படும் கூறுகளைச் சேமிப்பதைப் பற்றி சிந்திக்கவும். இது உங்கள் பயன்பாட்டை சீராகச் செயல்பட வைப்பதோடு, மீண்டும் வரைதல்களின் எண்ணிக்கையையும் குறைக்கிறது.
9. கிராஸ்-ஆரிஜின் படங்களை கேன்வாஸில் ஏற்ற முடியுமா?
10. ஆம், ஆனால் CORS சிரமங்களை ஏற்படுத்தாமல் படத்தைக் கிடைக்கச் செய்ய, நீங்கள் அமைக்க வேண்டும் சொத்து .

ஜாவாஸ்கிரிப்ட் பயன்பாடுகளில், படங்களை மறைப்பது மற்றும் கேன்வாஸில் தனிப்பயன் பார்டர்களைப் பயன்படுத்துவது மெருகூட்டப்பட்ட காட்சி கூறுகளை உருவாக்குவதற்கான ஒரு சிறந்த வழியாகும். டெவலப்பர்கள் படத்தைப் பயன்படுத்துவதன் மூலம் படங்களின் ரெண்டரிங் மற்றும் ஸ்டைலிங் ஆகியவற்றைக் கையாளும் திறனைக் கொண்டுள்ளனர். மற்றும் போன்ற அதிநவீன வரைதல் கட்டளைகள் மற்றும் பாதை வரையறைகள்.

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