മാസ്‌ക് ചെയ്‌ത ചിത്രത്തിലേക്ക് ഒരു ഇഷ്‌ടാനുസൃത ബോർഡർ ചേർക്കുന്നതിന് JavaScript-ൻ്റെ ക്യാൻവാസ് എങ്ങനെ ഉപയോഗിക്കാം

ജാവാസ്ക്രിപ്റ്റ് ക്യാൻവാസിൽ മാസ്‌ക്ഡ് ഇമേജ് ബോർഡറുകൾ മാസ്റ്ററിംഗ് ചെയ്യുന്നു

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

ഡെവലപ്പർമാർക്ക് മാസ്കുകളും ക്ലിപ്പ് ചിത്രങ്ങളും ഭാവനാത്മകമായ രീതിയിൽ പ്രയോഗിക്കാൻ കഴിയും ക്യാൻവാസ് API, ഡിഫോൾട്ടായി ആണെങ്കിലും, സൃഷ്ടിക്കുന്ന ഏതൊരു ബോർഡറും ക്യാൻവാസിൻ്റെ ചതുരാകൃതിയിലുള്ള രൂപവുമായി പൊരുത്തപ്പെടുന്നു. ഒരു മാസ്ക് നിർവചിച്ചിരിക്കുന്ന സങ്കീർണ്ണമായ ആകൃതിയുടെ അരികുകളുമായി പൊരുത്തപ്പെടുന്ന ഒരു ബോർഡർ സൃഷ്ടിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ, ഇത് ഒരു പ്രശ്നം അവതരിപ്പിക്കുന്നു. നേരായ ദീർഘചതുരാകൃതിയിലുള്ള അതിർത്തിക്കപ്പുറത്തേക്ക് മുഖംമൂടിയുടെ കൃത്യമായ യാത്ര പിന്തുടരുക എന്നതാണ് ലക്ഷ്യം.

ഈ പോസ്റ്റ് JavaScript-ൽ ഒരു ഇമേജ് മാസ്ക് എങ്ങനെ പ്രയോഗിക്കാമെന്നും കൂടുതൽ നിർണായകമായി, മാസ്ക് ചെയ്ത ചിത്രത്തിൻ്റെ വ്യതിരിക്തമായ ആകൃതി ഒരു ബോർഡറാൽ ചുറ്റപ്പെട്ടിരിക്കുന്നുവെന്ന് എങ്ങനെ ഉറപ്പാക്കാമെന്നും വിശദീകരിക്കും. കൂടാതെ, ഞങ്ങൾ മാസ്കിംഗ് പൂർത്തിയാക്കുന്ന ഒരു ഫംഗ്ഷനിലേക്ക് പോകും, ​​എന്നാൽ ഇതുവരെ നിർവചിക്കപ്പെട്ട ബോർഡർ സൊല്യൂഷൻ ഇല്ല.

ക്യാൻവാസിലെ കോമ്പോസിറ്റ് ഓപ്പറേഷനുകൾ ഉപയോഗിച്ച് എങ്ങനെ പ്രവർത്തിക്കാമെന്ന് മനസിലാക്കുന്നതിലൂടെ നിങ്ങൾക്ക് അതിർത്തിയുടെ രൂപം നന്നായി ക്രമീകരിക്കാൻ കഴിയും. നമുക്ക് ആരംഭിക്കാം, മാസ്ക് ചെയ്ത ചിത്രത്തിന് ചുറ്റും ആവശ്യമായ ബോർഡർ ചേർക്കുന്നതിന് JavaScript-ൻ്റെ ക്യാൻവാസ് സവിശേഷതകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് നോക്കാം.

മുഖംമൂടി ചെയ്ത ചിത്രത്തിലേക്ക് ഒരു ബോർഡർ എങ്ങനെ പ്രയോഗിക്കാമെന്ന് തിരിച്ചറിയുന്നു

നൽകിയിരിക്കുന്ന സ്‌ക്രിപ്റ്റുകളുടെ ലക്ഷ്യം ഒരു ചിത്രത്തിന് മറ്റൊരു ചിത്രം മാസ്‌ക് ആയി ഉപയോഗിക്കുക, തുടർന്ന് അത് ഉപയോഗിക്കുക എന്നതാണ് ക്യാൻവാസ് API മാസ്ക് ചെയ്ത ആകൃതിക്ക് ചുറ്റും ഒരു ഇഷ്‌ടാനുസൃത ബോർഡർ ചേർക്കാൻ. ഫംഗ്‌ഷൻ്റെ തുടക്കത്തിൽ മാസ്‌കിനും പ്രധാന ചിത്രത്തിനുമായി രണ്ട് പുതിയ ഇമേജ് ഒബ്‌ജക്റ്റുകൾ സൃഷ്‌ടിക്കുന്നു. ബാഹ്യ ഉറവിടങ്ങളിൽ നിന്ന് ഫോട്ടോകൾ ലോഡ് ചെയ്യുമ്പോൾ, CORS മൂലമുണ്ടാകുന്ന പ്രശ്നങ്ങൾ തടയാൻ ക്രോസ്-ഒറിജിൻ ക്രമീകരണം അത്യാവശ്യമാണ്. രണ്ട് ചിത്രങ്ങളും ലോഡുചെയ്‌തുകഴിഞ്ഞാൽ ഒരു ക്യാൻവാസ് രൂപീകരിക്കുകയും അതിൻ്റെ അനുപാതങ്ങൾ മാസ്‌ക് ചിത്രവുമായി പൊരുത്തപ്പെടുന്നതിന് ക്രമീകരിക്കുകയും ചെയ്യുന്നു. ഇത് ഇമേജ് ഡ്രോയിംഗ് സമയത്ത് വലുപ്പം മാറ്റുന്ന പ്രശ്നങ്ങൾ ഒഴിവാക്കുകയും ഉചിതമായ ഏരിയയിൽ പ്രവർത്തിക്കാൻ ക്യാൻവാസ് തയ്യാറാക്കിയിട്ടുണ്ടെന്ന് ഉറപ്പ് നൽകുകയും ചെയ്യുന്നു.

സ്ക്രിപ്റ്റ് പിന്നീട് ഉപയോഗിക്കുന്നു ചിത്രം () ക്യാൻവാസിലേക്ക് മാസ്ക് ചിത്രം വരയ്ക്കുന്നതിനുള്ള പ്രവർത്തനം. അങ്ങനെ ചെയ്യുമ്പോൾ, മാസ്ക് ക്യാൻവാസിൽ പ്രയോഗിക്കുന്നു, മാസ്കിംഗ് നടപടിക്രമത്തിനുള്ള അടിസ്ഥാന പാളിയായി പ്രവർത്തിക്കുന്നു. മാസ്ക് ശരിയായി പ്രയോഗിക്കുന്നതിന് ആഗോള സംയുക്ത പ്രവർത്തനം "സോഴ്സ്-ഇൻ" ആയി സജ്ജീകരിക്കണം. മാസ്ക് ചിത്രവുമായി പൊരുത്തപ്പെടുന്ന പ്രാഥമിക ചിത്രത്തിൻ്റെ ഭാഗങ്ങൾ മാത്രം നിലനിർത്താൻ ക്യാൻവാസിൽ നിർദ്ദേശിച്ചിരിക്കുന്നു. സാരാംശത്തിൽ, പ്രധാന ചിത്രം ക്ലിപ്പുചെയ്‌തിരിക്കുന്ന രൂപത്തെ മാസ്ക് നിർവചിക്കുന്നു. ഈ ക്ലിപ്പിംഗ് ഏരിയയ്ക്കുള്ളിൽ പ്രധാന ചിത്രം വരയ്ക്കുമ്പോൾ സംയോജിത പ്രവർത്തനം "സോഴ്സ്-ഓവർ" എന്നതിലേക്ക് പുനഃസജ്ജമാക്കും, മുമ്പ് ക്ലിപ്പ് ചെയ്ത ഉള്ളടക്കത്തെ ബാധിക്കാതെ ബോർഡർ പെയിൻ്റിംഗ് പോലുള്ള അധിക പ്രവർത്തനങ്ങൾ സാധ്യമാക്കുന്നു.

മാസ്ക് ചെയ്ത ആകൃതിയിൽ ഒരു ബോർഡർ പ്രയോഗിക്കുന്നത് ഉപയോഗിക്കുന്നത് ഉൾപ്പെടുന്നു സ്ട്രോക്ക്() സാങ്കേതികത. ക്യാൻവാസിലെ നിർദ്ദിഷ്ട പാത്ത് അല്ലെങ്കിൽ ഫോം ഈ കമാൻഡ് സൂചിപ്പിക്കുന്നു. രണ്ടാമത്തെ സൊല്യൂഷനിൽ, ക്യാൻവാസ് പാത്ത് സ്വമേധയാ സൃഷ്ടിക്കുന്നതിനും മാസ്കിൻ്റെ ബോർഡറുകൾ കണ്ടെത്തുന്നതിനുമായി, moveTo(), lineTo() എന്നിവ സംയോജിപ്പിച്ചിരിക്കുന്നു. ഈ ടെക്‌നിക്കുകൾ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ബോർഡറിൻ്റെ ആകൃതി സ്വമേധയാ വ്യക്തമാക്കുകയും അത് ചതുരാകൃതിയിലുള്ള ക്യാൻവാസ് അതിർത്തിയേക്കാൾ മാസ്‌കിൻ്റെ ആകൃതിയോട് ചേർന്ന് നിൽക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുകയും ചെയ്യാം. അതിർത്തിയുടെ രൂപത്തിൽ നിങ്ങൾക്ക് പൂർണ്ണ നിയന്ത്രണമുണ്ട്, കാരണം ലൈൻവിഡ്ത്ത് പ്രോപ്പർട്ടി അതിർത്തിയുടെ കനം നിശ്ചയിക്കുന്നു സ്ട്രോക്ക്സ്റ്റൈൽ സ്വത്ത് അതിൻ്റെ നിറം സജ്ജമാക്കുന്നു.

അവസാനമായി, toDataURL() ഫംഗ്‌ഷൻ ക്യാൻവാസിനെ Base64 സ്ട്രിംഗാക്കി മാറ്റാൻ ഉപയോഗിക്കുന്നു. ഇത് ചെയ്യുന്നതിലൂടെ, പൂർത്തിയാക്കിയ ചിത്രം-മാസ്കും ബോർഡറും ഉൾപ്പെടുത്തി- പ്രോഗ്രാമിൻ്റെ മറ്റ് മേഖലകളിൽ എളുപ്പത്തിൽ ഉപയോഗിക്കപ്പെടുന്നതോ സെർവറിലേക്ക് അപ്ലോഡ് ചെയ്യുന്നതോ ആയ ഒരു ഫോർമാറ്റിലേക്ക് രൂപാന്തരപ്പെടുന്നു. സമയ പിശകുകൾ ഒഴിവാക്കാൻ, രണ്ട് ചിത്രങ്ങളും പൂർണ്ണമായി ലോഡ് ചെയ്യുമ്പോൾ മാത്രമേ ഈ പ്രവർത്തനം അവസാനിക്കൂ എന്ന് ഉറപ്പ് നൽകുന്നു. ജാവാസ്ക്രിപ്റ്റിൻ്റെ ക്യാൻവാസ് ഘടകം ഉപയോഗിച്ച് മാസ്കിൻ്റെ രൂപരേഖയുമായി കൃത്യമായി പൊരുത്തപ്പെടുന്ന ഡൈനാമിക് ബോർഡർ മാസ്കിംഗും പ്രയോഗിക്കുന്നതും ഉൾപ്പെടെയുള്ള സങ്കീർണ്ണമായ ഇമേജ് മോഡിഫിക്കേഷൻ ടെക്നിക്കുകൾ എങ്ങനെ നിർവഹിക്കാമെന്ന് ഈ സ്ക്രിപ്റ്റുകൾ കാണിക്കുന്നു.

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

ജാവാസ്ക്രിപ്റ്റിലെ ഇഷ്‌ടാനുസൃത ബോർഡറുകൾ ഉപയോഗിച്ച് മാസ്‌ക് ചെയ്‌ത ചിത്രങ്ങൾ മെച്ചപ്പെടുത്തുന്നു

നിങ്ങളുടെ JavaScript ആപ്ലിക്കേഷൻ്റെ ഉപയോക്തൃ അനുഭവം ഇമേജുകൾ മാസ്ക് ചെയ്യാനും ഇഷ്‌ടാനുസൃത ബോർഡറുകൾ സജ്ജീകരിക്കാനുമുള്ള കഴിവ് ഉപയോഗിച്ച് വളരെയധികം മെച്ചപ്പെടുത്താൻ കഴിയും. ക്യാൻവാസ് API. മാസ്‌കിംഗിൻ്റെ സഹായത്തോടെ, മാസ്ക് എന്നറിയപ്പെടുന്ന മറ്റൊരു ചിത്രത്തെ ആശ്രയിച്ച് ഒരു ചിത്രത്തിൻ്റെ ഏതൊക്കെ മേഖലകൾ ദൃശ്യമാണെന്ന് നിങ്ങൾക്ക് തീരുമാനിക്കാം. മാസ്ക് ചെയ്ത സോണിന് ചുറ്റും ഒരു ബോർഡർ ചേർക്കുന്നത് പല ഡെവലപ്പർമാരും നേരിടുന്ന ഒരു പ്രശ്നമാണ്, പ്രത്യേകിച്ചും മുഖംമൂടി ഒരു ചതുരാകൃതിയിലുള്ള ആകൃതി അല്ലാത്തപ്പോൾ. മാസ്കിൻ്റെ രൂപരേഖയുമായി കൃത്യമായി പൊരുത്തപ്പെടുന്ന ബോർഡറുകളുള്ള പ്രോജക്റ്റുകൾ കൂടുതൽ മിനുക്കിയതും വിദഗ്‌ധരുമായി ദൃശ്യമാകും.

ഈ പ്രശ്നത്തിനുള്ള ഒരു ഉപയോഗപ്രദമായ പരിഹാരം ക്യാൻവാസ് API ഉപയോഗിക്കുക എന്നതാണ് Path2D വസ്തു. നിങ്ങളുടെ മാസ്കിൻ്റെ രൂപരേഖയ്ക്ക് അനുയോജ്യമായ സങ്കീർണ്ണമായ റൂട്ടുകൾ രൂപകൽപ്പന ചെയ്യാൻ നിങ്ങൾക്ക് Path2D ഉപയോഗിക്കാം, തുടർന്ന് അവയെ ഒരു ബോർഡറുകൊണ്ട് വലയം ചെയ്യാം. പരമ്പരാഗത ദീർഘചതുരങ്ങൾക്കപ്പുറം നിങ്ങളുടെ ഇഷ്‌ടാനുസൃത മാസ്കിൻ്റെ കോണുകളുമായി കൃത്യമായി പൊരുത്തപ്പെടുന്ന ബോർഡറുകൾ സൃഷ്ടിക്കാൻ ഈ രീതി നിങ്ങളെ അനുവദിക്കുന്നു. ഉപയോഗിക്കുന്നത് moveTo() ഒപ്പം lineTo() ഒരുമിച്ച് മാസ്കിൻ്റെ രൂപരേഖ കണ്ടെത്തുന്നത് എളുപ്പമാക്കുകയും കൃത്യമായി വിന്യസിച്ചിരിക്കുന്ന ഒരു ബോർഡർ ഉറപ്പ് നൽകുകയും ചെയ്യുന്നു.

കണക്കിലെടുക്കേണ്ട മറ്റൊരു പ്രധാന ഘടകമാണ് പ്രകടനം, പ്രത്യേകിച്ച് വലിയ ചിത്രങ്ങളുമായി പ്രവർത്തിക്കുമ്പോഴോ തത്സമയം ചലനാത്മകമായി ബോർഡറുകൾ പ്രയോഗിക്കുമ്പോഴോ. മാസ്ക് ചെയ്ത ചിത്രം കാഷെ ചെയ്യുക, ഡ്രോയിംഗ് പ്രവർത്തനങ്ങൾ കുറയ്ക്കുക, ക്യാൻവാസ് റെൻഡറിംഗ് പ്രക്രിയ കാര്യക്ഷമമാക്കുക തുടങ്ങിയ തന്ത്രങ്ങൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ വേഗത മെച്ചപ്പെടുത്താൻ കഴിയും. സങ്കീർണ്ണമോ ഉയർന്ന പ്രകടനമോ ആയ ക്രമീകരണങ്ങളിൽ പോലും, അർത്ഥശൂന്യമായ പ്രവർത്തനങ്ങൾ കുറച്ചുകൊണ്ട് മാസ്കിംഗും ബോർഡർ ഡ്രോയിംഗും സുഗമമായി നടക്കുന്നുണ്ടെന്ന് നിങ്ങൾക്ക് ഉറപ്പുനൽകാനാകും.