मास्क केलेल्या प्रतिमेमध्ये कस्टम बॉर्डर जोडण्यासाठी JavaScript चा कॅनव्हास कसा वापरायचा

JavaScript कॅनव्हासमध्ये मास्क केलेल्या इमेज बॉर्डर्सवर प्रभुत्व मिळवणे

जावास्क्रिप्ट व्हिज्युअल इफेक्ट्सच्या निर्मितीमध्ये मल्टिपल पिक्चर फ्यूजन ही एक सामान्य पायरी आहे. मास्कसह प्रतिमेचे दृश्य क्षेत्र परिभाषित करणे हे एक वारंवार तंत्र आहे. हे अद्वितीय फॉर्म तयार करण्यासाठी उपयुक्त असले तरी, त्या मुखवटा घातलेल्या आकारांभोवती सीमा जोडणे आव्हानात्मक असू शकते. जरी द कॅनव्हास JavaScript मधील घटक विस्तृत इमेज मॅनिप्युलेशन ऑफर करतो, मुखवटा घातलेल्या प्रतिमेभोवती सीमा समायोजित करणे सोपे नाही.

डेव्हलपर मास्क लावू शकतात आणि कल्पनारम्य मार्गांनी चित्रे क्लिप करू शकतात कॅनव्हास API, जरी डीफॉल्टनुसार, व्युत्पन्न केलेली कोणतीही सीमा कॅनव्हासच्या आयताकृती आकाराशी जुळते. जेव्हा आपण मास्कद्वारे परिभाषित केलेल्या गुंतागुंतीच्या आकाराच्या किनारीशी जुळणारी सीमा तयार करू इच्छित असाल, तेव्हा ही एक समस्या आहे. सरळ आयताकृती सीमेच्या पलीकडे मास्कच्या अचूक प्रवासाचे अनुसरण करणे हा उद्देश आहे.

हे पोस्ट JavaScript मध्ये इमेज मास्क कसा लागू करायचा आणि अधिक महत्त्वाचे म्हणजे, मुखवटा घातलेल्या चित्राचा वेगळा आकार बॉर्डरने वेढलेला आहे याची खात्री कशी करायची हे स्पष्ट करेल. याव्यतिरिक्त, आम्ही अशा फंक्शनवर जाऊ जे मास्किंग पूर्ण करते परंतु अद्याप परिभाषित सीमा समाधान नाही.

कॅनव्हासमधील संमिश्र ऑपरेशन्ससह कसे कार्य करावे हे शिकून तुम्ही बॉर्डरचे स्वरूप चांगले करू शकता. चला प्रारंभ करूया आणि मुखवटा घातलेल्या प्रतिमेभोवती आवश्यक सीमा जोडण्यासाठी JavaScript ची कॅनव्हास वैशिष्ट्ये कशी वापरायची ते पाहू.

मुखवटा घातलेल्या प्रतिमेला सीमा कशी लागू करावी हे ओळखणे

प्रदान केलेल्या स्क्रिप्टचा उद्देश एका प्रतिमेसाठी मुखवटा म्हणून दुसरे चित्र वापरणे आणि नंतर वापरणे हे आहे कॅनव्हास API मुखवटा घातलेल्या आकाराभोवती सानुकूल सीमा जोडण्यासाठी. मुखवटा आणि मुख्य प्रतिमेसाठी फंक्शनच्या सुरुवातीला दोन नवीन इमेज ऑब्जेक्ट्स तयार केल्या जातात. बाह्य स्त्रोतांकडून फोटो लोड करताना, CORS मुळे समस्या टाळण्यासाठी क्रॉस-ओरिजिन सेटिंग आवश्यक आहे. एक कॅनव्हास तयार होतो आणि दोन्ही प्रतिमा लोड केल्यावर मुखवटा प्रतिमेशी जुळण्यासाठी त्याचे प्रमाण समायोजित केले जाते. हे प्रतिमा रेखांकन दरम्यान आकार बदलण्याची समस्या टाळते आणि कॅनव्हास योग्य क्षेत्रासह कामासाठी तयार असल्याची हमी देते.

स्क्रिप्ट नंतर वापरते चित्र काढा() कॅनव्हासवर मुखवटा प्रतिमा काढण्याचे कार्य. असे केल्याने, मुखवटा कॅनव्हासवर लागू केला जातो, मास्किंग प्रक्रियेसाठी पाया स्तर म्हणून काम करतो. मास्क योग्यरित्या लागू करण्यासाठी ग्लोबल कंपोझिट ऑपरेशन "सोर्स-इन" वर सेट केले जाणे आवश्यक आहे. कॅनव्हासला मुखवटाच्या प्रतिमेशी सुसंगत असलेल्या प्राथमिक चित्राची फक्त क्षेत्रे ठेवण्याची सूचना दिली आहे. थोडक्यात, मुखवटा मुख्य प्रतिमा ज्या आकारात क्लिप केली आहे ते परिभाषित करतो. जेव्हा या क्लिपिंग क्षेत्रामध्ये मुख्य चित्र काढले जाते तेव्हा संयुक्त ऑपरेशन "स्रोत-ओव्हर" वर रीसेट केले जाते, पूर्वी क्लिप केलेल्या सामग्रीवर परिणाम न करता सीमा पेंटिंगसारख्या अतिरिक्त क्रिया सक्षम करते.

मुखवटा घातलेल्या आकारावर सीमा लागू करताना वापरणे समाविष्ट आहे स्ट्रोक() तंत्र कॅनव्हासवरील निर्दिष्ट मार्ग किंवा फॉर्म या आदेशाद्वारे दर्शविला जातो. दुसऱ्या सोल्युशनमध्ये, moveTo() आणि lineTo() मॅन्युअली कॅनव्हास मार्ग तयार करण्यासाठी आणि मुखवटाच्या सीमा शोधण्यासाठी एकत्र केले जातात. या तंत्रांचा वापर करून, तुम्ही बॉर्डरचा आकार व्यक्तिचलितपणे निर्दिष्ट करू शकता आणि ते आयताकृती कॅनव्हासच्या सीमेऐवजी मुखवटाच्या आकाराचे पालन करत असल्याची खात्री करा. सीमेच्या दिसण्यावर तुमचे पूर्ण नियंत्रण आहे कारण रेषा रुंदी मालमत्ता सीमा च्या जाडी सेट करते आणि स्ट्रोक शैली मालमत्ता त्याचा रंग सेट करते.

शेवटी, toDataURL() फंक्शनचा वापर कॅनव्हासला बेस64 स्ट्रिंगमध्ये रूपांतरित करण्यासाठी केला जातो. असे केल्याने, तयार केलेली प्रतिमा—मास्क आणि बॉर्डर समाविष्ट—हे एका फॉरमॅटमध्ये रूपांतरित केले जाते जे प्रोग्रामच्या इतर भागात सहजपणे वापरले जाते किंवा सर्व्हरवर अपलोड केले जाते. वेळेच्या चुका टाळण्यासाठी, वचन हे सुनिश्चित करते की हे ऑपरेशन फक्त दोन्ही चित्रे पूर्णपणे लोड झाल्यावरच संपेल. जावास्क्रिप्टच्या कॅनव्हास घटकासह मास्किंग आणि डायनॅमिक बॉर्डर लागू करणे यासह अत्याधुनिक प्रतिमा सुधारणेचे तंत्र या स्क्रिप्ट्स दाखवतात.

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;
    });
}

१

JavaScript मध्ये सानुकूल बॉर्डर्ससह मुखवटा घातलेल्या प्रतिमा वाढवणे

तुमच्या JavaScript ऍप्लिकेशनचा वापरकर्ता अनुभव प्रतिमा मास्क करण्याच्या आणि सानुकूल सीमा सेट करण्याच्या क्षमतेद्वारे मोठ्या प्रमाणात वाढविला जाऊ शकतो. कॅनव्हास API. मास्किंगच्या मदतीने, मास्क म्हणून ओळखल्या जाणाऱ्या दुसऱ्या प्रतिमेवर अवलंबून, प्रतिमेचे कोणते क्षेत्र दृश्यमान आहेत हे तुम्ही ठरवू शकता. मुखवटा घातलेल्या झोनभोवती सीमा जोडणे ही एक समस्या आहे जी अनेक विकसकांना भेडसावते, विशेषत: जेव्हा मुखवटा सरळ आयताकृती आकार नसतो. मास्कच्या बाह्यरेषेशी तंतोतंत जुळणारे बॉर्डर असलेले प्रकल्प अधिक सुंदर आणि तज्ज्ञ दिसतील.

या समस्येवर उपयुक्त उपाय म्हणजे Canvas API चा वापर करणे पथ2D वस्तू तुम्ही Path2D वापरू शकता जटिल मार्ग डिझाइन करण्यासाठी जे तुमच्या मुखवटाच्या आराखड्यात बसतात आणि नंतर त्यांना बॉर्डरने घेरतात. ही पद्धत तुम्हाला पारंपारिक आयतांच्या पलीकडे जाऊन तुमच्या सानुकूल मुखवटाच्या कोपऱ्यांशी तंतोतंत जुळणाऱ्या सीमा निर्माण करू देते. वापरत आहे moveTo() आणि १ एकत्रितपणे मुखवटाची बाह्यरेखा शोधणे सोपे करते आणि तंतोतंत संरेखित केलेल्या सीमारेषेची हमी देते.

कार्यप्रदर्शन हा विचारात घेण्याचा आणखी एक महत्त्वाचा घटक आहे, विशेषत: मोठ्या इमेजसह काम करताना किंवा रिअल-टाइममध्ये डायनॅमिकपणे सीमा लागू करताना. मुखवटा घातलेले चित्र कॅश करणे, ड्रॉइंग ऑपरेशन्स कमी करणे आणि कॅनव्हास रेंडरिंग प्रक्रिया सुव्यवस्थित करणे यासारख्या धोरणांचा वापर करून तुमच्या अनुप्रयोगाचा वेग सुधारला जाऊ शकतो. अगदी क्लिष्ट किंवा उच्च-कार्यक्षमता सेटिंग्जमध्ये, आपण हमी देऊ शकता की मास्किंग आणि बॉर्डर-ड्राइंग प्रक्रिया निरर्थक क्रिया कमी करून सहजतेने जातात.