Kā izmantot JavaScript audeklu, lai maskētam attēlam pievienotu pielāgotu apmali

Maskētu attēlu apmaļu apgūšana JavaScript kanvā

Vairāku attēlu saplūšana ir izplatīts JavaScript vizuālo efektu izveides solis. Attēla redzamo apgabalu noteikšana ar masku ir bieži sastopama tehnika. Lai gan tas ir noderīgi, veidojot unikālas formas, var būt sarežģīti pievienot apmali ap šīm maskētajām formām. Lai gan JavaScript elements piedāvā plašas attēlu manipulācijas, nav viegli pielāgot apmali ap maskētu attēlu.

Izstrādātāji var izmantot maskas un klipu attēlus radoši, izmantojot , lai gan pēc noklusējuma jebkura ģenerētā apmale parasti atbilst audekla taisnstūra formai. Ja vēlaties izveidot apmali, kas atbilst sarežģītas formas malām, ko nosaka maska, tas rada problēmu. Mērķis ir sekot līdzi maskas precīzajam ceļojumam aiz tiešās taisnstūra robežas.

Šajā rakstā tiks paskaidrots, kā lietot attēla masku JavaScript un, vēl svarīgāk, kā pārliecināties, ka maskētā attēla atšķirīgo formu ieskauj apmale. Turklāt mēs apskatīsim funkciju, kas pabeidz maskēšanu, bet kurai vēl nav noteikta apmales risinājuma.

Varat precīzi noregulēt apmales izskatu, iemācoties strādāt ar saliktām darbībām audeklā. Sāksim darbu un redzēsim, kā izmantot JavaScript audekla funkcijas, lai pievienotu nepieciešamo apmali ap maskētu attēlu.

Komanda	Lietošanas piemērs
globalCompositeOperation	Šī funkcija nosaka zīmēšanas darbību sastāvu uz audekla. GlobalCompositeOperation ='source-in' piemērā nodrošina, ka maskas attēls sagriež galveno attēlu, lai būtu redzami tikai tie apgabali, kas krustojas.
toDataURL()	Pārveido audekla informāciju attēlā, kas kodēts ar Base64. Tas ļauj izmantot gatavo attēlu kā PNG pēc maskas un apmales uzlikšanas. Piemēra attēla izvade tiek veidota, izmantojot canvas.toDataURL('image/png').
crossOrigin	Šis līdzeklis ievēro drošības ierobežojumus, ļaujot audeklā izmantot attēlus, kas ielādēti no cita domēna. MaskImg.crossOrigin = 'anonīms' garantē, ka var piekļūt maskas attēlam, neradot CORS problēmas.
beginPath()	Izmantojot šo metodi, uz audekla var sākt jaunu ceļu. Otrā metode izsauc ctx.beginPath(), lai nodrošinātu, ka ceļš atbilst maskas kontūrai, zīmējot pielāgotu apmali ap maskēto attēlu.
moveTo()	Izmantojot šo procedūru, zīmējumi netiek veidoti; tā vietā "pildspalva" tiek pārvietota uz jaunu sākuma vietu. Apmales sākuma punkts piemērā ir novietots, izmantojot ctx.moveTo(0, 0), kas ir būtisks, lai precīzi novilktu apmali ap maskas robežām.
lineTo()	Izmantojot dotās koordinātas kā sākumpunktu, šis paņēmiens zīmē taisnu līniju. Maskētā attēla robežu nosaka līnijas, kas novilktas risinājumā, izmantojot ctx.lineTo(maskImg.width, 0).
stroke()	Pa norādīto ceļu novelk robežas vai līnijas. Piemēram, MoveTo() un lineTo() tiek izmantotas, lai definētu maskas formu, un pēc tam ctx.stroke() tiek izmantots, lai lietotu apmali ap maskēto attēlu.
lineWidth	Nosaka, cik biezas līnijas ir uzkrāsotas uz audekla. Skripts izveido 5 pikseļu biezu apmali ap maskas formu, izmantojot ctx.lineWidth = 5.
strokeStyle	Norāda apmales krāsu vai stilu. Apmales krāsa piemērā ir iestatīta uz sarkanu, izmantojot ctx.strokeStyle ='red'.

Atpazīšana, kā maskētam attēlam uzlikt apmali

Piedāvāto skriptu mērķis ir izmantot citu attēlu kā masku vienam attēlam un pēc tam izmantot lai ap maskēto formu pievienotu pielāgotu apmali. Maskas un galvenā attēla funkcijas sākumā tiek izveidoti divi jauni attēla objekti. Ielādējot fotoattēlus no ārējiem avotiem, vairāku izcelsmju iestatījums ir būtisks, lai novērstu CORS izraisītas problēmas. Kad abi attēli ir ielādēti, tiek izveidots audekls un tā proporcijas tiek pielāgotas, lai tās atbilstu maskas attēlam. Tas ļauj izvairīties no izmēru maiņas problēmām attēla zīmēšanas laikā un garantē, ka audekls ir sagatavots darbam ar atbilstošo laukumu.

Pēc tam skripts izmanto funkcija, lai uz audekla uzzīmētu maskas attēlu. To darot, maska ​​tiek uzklāta uz audekla, kas kalpo par pamatu maskēšanas procedūrai. Lai pareizi lietotu masku, globālā saliktā darbība ir jāiestata uz "avota ievade". Audekls ir norādīts, lai saglabātu tikai primārā attēla apgabalus, kas sakrīt ar maskas attēlu. Būtībā maska ​​nosaka formu, līdz kurai tiek apgriezts galvenais attēls. Saliktā darbība tiek atiestatīta uz "avota pārsūtīšanu", kad galvenais attēls tiek uzzīmēts šajā izgriešanas apgabalā, ļaujot veikt papildu darbības, piemēram, apmales apgleznošanu, neietekmējot iepriekš izgriezto saturu.

Apmales uzlikšana maskētajai formai ietver tehnika. Ar šo komandu norāda norādīto ceļu vai formu uz audekla. Otrajā risinājumā moveTo () un lineTo () tiek apvienoti, lai manuāli ģenerētu audekla ceļu un izsekotu maskas robežas. Izmantojot šīs metodes, varat manuāli norādīt apmales formu un pārliecināties, ka tā atbilst maskas formai, nevis taisnstūrveida audekla robežai. Jums ir pilnīga kontrole pār robežas izskatu, jo Īpašums nosaka apmales biezumu un īpašums nosaka tā krāsu.

Visbeidzot, funkcija toDataURL() tiek izmantota, lai pārveidotu audeklu Base64 virknē. To darot, gatavais attēls, ieskaitot masku un apmali, tiek pārveidots formātā, ko var viegli izmantot citās programmas jomās vai augšupielādēt serverī. Lai izvairītos no laika kļūdām, solījums nodrošina, ka šī darbība beidzas tikai tad, kad abi attēli ir pilnībā ielādēti. Šie skripti parāda, kā ar JavaScript audekla elementu var veikt sarežģītas attēla modifikācijas metodes, tostarp maskēt un lietot dinamisku apmali, kas precīzi atbilst maskas kontūrām.

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

Maskēto attēlu uzlabošana ar pielāgotām apmalēm JavaScript

Jūsu JavaScript lietojumprogrammas lietošanas pieredzi var ievērojami uzlabot iespēja maskēt attēlus un iestatīt pielāgotas apmales, strādājot ar . Izmantojot maskēšanu, varat izlemt, kuri attēla apgabali ir redzami atkarībā no cita attēla, kas pazīstams kā maska. Apmales pievienošana ap maskēto zonu ir problēma, ar kuru saskaras daudzi izstrādātāji, jo īpaši, ja maska ​​nav vienkārša taisnstūra forma. Projekti ar apmalēm, kas precīzi atbilst maskas kontūrai, izskatīsies izsmalcinātāki un lietpratīgāki.

Noderīgs šīs problēmas risinājums ir Canvas API izmantošana objektu. Varat izmantot Path2D, lai izstrādātu sarežģītus maršrutus, kas atbilst jūsu maskas kontūrām, un pēc tam tos ieskauj ar apmali. Šī metode ļauj ģenerēt apmales, kas precīzi atbilst jūsu pielāgotās maskas stūriem, pārsniedzot parastos taisnstūrus. Izmantojot un kopā atvieglo maskas kontūru izsekošanu un garantē precīzi izlīdzinātu apmali.

Veiktspēja ir vēl viens svarīgs faktors, kas jāņem vērā, jo īpaši, strādājot ar lielākiem attēliem vai dinamiski piemērojot apmales reāllaikā. Lietojumprogrammas ātrumu var uzlabot, izmantojot tādas stratēģijas kā maskētā attēla saglabāšana kešatmiņā, zīmēšanas darbību samazināšana un audekla renderēšanas procesa racionalizēšana. Pat sarežģītos vai augstas veiktspējas iestatījumos varat garantēt, ka maskēšanas un apmales zīmēšanas procedūras norit bez problēmām, samazinot bezjēdzīgu darbību skaitu.

1. Kā es varu izmantot citu attēlu, lai maskētu JavaScript?
2. Izmantojot iestatīts uz , uzzīmējiet masku uz audekla, lai maskētu attēlu, izmantojot . Lai atbilstu maskai, primārais attēls tiks apgriezts.
3. Kā es varu izveidot apmali maskētam attēlam, kas atbilst tā formai?
4. Pēc maskas maršruta noteikšanas ar un , izmantojiet tehnika. Tas ļaus jums apvilkt maskas formu ar personalizētu apmali.
5. Kāds ir mērķis audekla manipulācijās?
6. Audekla saturs tiek pārveidots par Base64 kodētu attēlu, izmantojot funkcija, padarot to vienkāršu lietošanu vai izplatīšanu kā PNG attēlu.
7. Kā es varu optimizēt kanvas darbības veiktspējai?
8. Samaziniet zīmēšanas darbību skaitu un padomājiet par bieži izmantoto elementu glabāšanu, lai maksimāli palielinātu audekla ātrumu. Tas nodrošina jūsu lietojumprogrammas nevainojamu darbību un samazina pārzīmēšanas gadījumu skaitu.
9. Vai audeklā var ielādēt dažādus izcelsmes attēlus?
10. Jā, bet, lai attēls būtu pieejams, neradot CORS grūtības, ir jāiestata īpašumu uz .

JavaScript lietotnēs attēlu maskēšana un pielāgotu apmaļu lietošana audeklā ir efektīvs veids, kā izveidot slīpētus vizuālos elementus. Izstrādātājiem ir iespēja manipulēt ar attēlu renderēšanu un stilu, izmantojot un sarežģītas zīmēšanas komandas, piemēram, un ceļu definīcijas.

Vienmērīga veiktspēja tiek nodrošināta, rūpīgi optimizējot apmales un maskēšanas darbības, īpaši lielākiem fotoattēliem. Šī apmācība sniedz noderīgu metodi, lai dinamiski apzīmētu robežas ap attēliem, kas nav taisnstūrveida, un tas ir noderīgi, izstrādājot tiešsaistes lietotnes, kas ir gan estētiski pievilcīgas, gan atsaucīgas.