Kuidas kasutada JavaScripti lõuendit maskeeritud pildile kohandatud äärise lisamiseks

Maskeeritud pildiääriste valdamine JavaScripti lõuendil

Mitme pildi liitmine on JavaScripti visuaalsete efektide loomise tavaline samm. Kujutise vaadatavate alade määratlemine maskiga on tavaline tehnika. Kuigi see on abiks ainulaadsete vormide loomisel, võib nende maskeeritud kujundite ümber äärise lisamine olla keeruline. Kuigi JavaScripti element pakub ulatuslikku pilditöötlust, ei ole lihtne maskeeritud pildi ümber olevat äärist reguleerida.

Arendajad saavad rakendusega maske ja pilte teha fantaasiarikkal viisil , kuigi vaikimisi kipub iga loodud ääris ühtima lõuendi ristkülikukujulise kujuga. Kui soovite luua äärise, mis sobib maskiga määratletud keeruka kujundi servadega, tekitab see probleeme. Eesmärk on jälgida maski täpset teekonda sirgest ristkülikukujulisest piirist.

See postitus selgitab, kuidas JavaScriptis pildimaski rakendada ja, mis veelgi olulisem, kuidas tagada, et maskeeritud pildi selge kuju oleks ümbritsetud äärisega. Lisaks käsitleme funktsiooni, mis lõpetab maskeerimise, kuid millel pole veel määratletud piirilahendust.

Piiride välimust saate täpsustada, õppides lõuendil liittoimingutega töötamist. Alustame ja vaatame, kuidas kasutada JavaScripti lõuendi funktsioone, et lisada maskeeritud pildile vajalik ääris.

Käsk	Kasutusnäide
globalCompositeOperation	See funktsioon määrab lõuendile joonistustoimingute kompositsiooni. Näites olev globalCompositeOperation ='source-in' tagab, et maski kujutis lõikab põhipildi nii, et näha on ainult ristuvad alad.
toDataURL()	Muudab lõuendi teabe Base64-ga kodeeritud pildiks. See võimaldab pärast maski ja äärise rakendamist valmis pilti kasutada PNG-vormingus. Näite kujutise väljund luuakse kasutades canvas.toDataURL('image/png').
crossOrigin	See funktsioon järgib turvapiiranguid, võimaldades lõuendil kasutada teisest domeenist laaditud pilte. MaskImg.crossOrigin = 'anonüümne' garanteerib, et maski kujutisele pääseb juurde ilma CORS-i probleeme tekitamata.
beginPath()	Lõuendil saab seda meetodit kasutades alustada uut rada. Teine meetod kutsub välja ctx.beginPath() tagamaks, et tee järgib maski kontuuri, kuna see tõmbab maskeeritud pildi ümber kohandatud äärise.
moveTo()	Selle protseduuriga jooniseid ei tehta; selle asemel viiakse "pliiats" uude alguskohta. Piiri alguspunkt paigutatakse näites kasutades ctx.moveTo(0, 0), mis on oluline äärise täpseks ümber maski piiride joonistamiseks.
lineTo()	Kasutades antud koordinaate lähtepunktina, tõmbab see tehnika sirge. Maskeeritud pildi ääris on määratletud joontega, mis on joonistatud lahenduses, kasutades ctx.lineTo(maskImg.width, 0).
stroke()	Mööda määratud rada, tõmbab piire või jooni. Näiteks kasutatakse käsku moveTo() ja lineTo() maskivormi määratlemiseks ning seejärel ctx.stroke() maskeeritud pildi ümber äärise rakendamiseks.
lineWidth	Määrab, kui paksud jooned lõuendile maalitakse. Skript loob maski kuju ümber 5 piksli paksuse äärise, kasutades ctx.lineWidth = 5.
strokeStyle	Näitab äärise värvi või stiili. Näites on äärise värv punaseks määratud käsuga ctx.strokeStyle ='red'.

Tunnistage, kuidas maskeeritud kujutisele äärist rakendada

Pakutavate skriptide eesmärk on kasutada ühe pildi maskina teist pilti ja seejärel kasutada kohandatud äärise lisamiseks maskeeritud kujundi ümber. Maski ja põhipildi funktsiooni alguses luuakse kaks uut pildiobjekti. Fotode laadimisel välistest allikatest on ristpäritolu seadistus hädavajalik, et vältida CORS-i põhjustatud probleeme. Kui mõlemad pildid on laaditud, moodustatakse lõuend ja selle proportsioonid kohandatakse maski kujutisega sobitamiseks. See väldib pildi joonistamise ajal suuruse muutmise probleeme ja tagab lõuendi ettevalmistamise sobiva alaga töötamiseks.

Seejärel kasutab skript funktsioon maski kujutise lõuendile joonistamiseks. Seejuures kantakse mask lõuendile, mis toimib maskeerimisprotseduuri aluskihina. Maski õigeks rakendamiseks peab globaalne liittehing olema seatud väärtusele "lähteallikas". Lõuendil on käsk säilitada ainult põhipildi alad, mis langevad kokku maski kujutisega. Sisuliselt määrab mask kuju, mille järgi põhipilt kärbitakse. Kui põhipilt joonistatakse selle lõikeala sisse, lähtestatakse liitoperatsioon "allika üle", mis võimaldab täiendavaid toiminguid, näiteks piiride maalimist, ilma eelnevalt kärbitud sisu mõjutamata.

Piiri kandmine maskeeritud kujundile hõlmab tehnikat. Määratud tee või vorm lõuendil tähistatakse selle käsuga. Teises lahenduses kombineeritakse liikumine() ja lineTo() lõuendi tee käsitsi genereerimiseks ja maski piiride jälgimiseks. Nende tehnikate abil saate käsitsi määrata äärise kuju ja veenduda, et see järgiks maski kuju, mitte ristkülikukujulist lõuendi piiri. Teil on täielik kontroll piiri välimuse üle, sest atribuut määrab piiri paksuse ja omadus määrab selle värvi.

Lõpuks kasutatakse funktsiooni toDataURL() lõuendi muutmiseks Base64 stringiks. Seda tehes muudetakse valmis pilt (kaasa arvatud mask ja ääris) vormingusse, mida saab hõlpsasti programmi teistes piirkondades kasutada või serverisse üles laadida. Ajavigade vältimiseks hoolitseb lubadus, et see toiming lõppeb alles siis, kui mõlemad pildid on täielikult laetud. Need skriptid näitavad, kuidas keerukaid kujutise muutmise tehnikaid, sealhulgas maski ja dünaamilise äärise rakendamist, mis vastab täpselt maski kontuuridele, saab saavutada JavaScripti lõuendielemendiga.

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

Maskeeritud piltide täiustamine kohandatud ääristega JavaScriptis

Teie JavaScripti rakenduse kasutajakogemust saab oluliselt parandada võimalus maskeerida pilte ja määrata kohandatud ääriseid, kui käsitlete . Maskeerimise abil saate otsustada, millised pildi alad on nähtavad sõltuvalt teisest kujutisest, mida nimetatakse maskiks. Piiri lisamine maskeeritud tsooni ümber on probleem, millega paljud arendajad kokku puutuvad, eriti kui mask ei ole sirgjooneline ristkülikukujuline. Projektid, mille äärised vastavad täpselt maski piirjoontele, näevad välja lihvitud ja asjatundlikumad.

Kasulik lahendus sellele probleemile on kasutada Canvas API-t objektiks. Path2D abil saate kujundada keerukaid marsruute, mis sobivad teie maski kontuuridega, ja seejärel ümbritseda need äärisega. See meetod võimaldab teil luua ääriseid, mis vastavad täpselt teie kohandatud maski nurkadele, ületades tavapäraseid ristkülikuid. Kasutades ja koos muudab maski piirjoonte jälgimise lihtsamaks ja tagab täpselt joondatud piiri.

Jõudlus on veel üks oluline tegur, mida tuleb arvesse võtta, eriti kui töötate suuremate piltidega või rakendate ääriseid dünaamiliselt reaalajas. Teie rakenduse kiirust saab parandada, kasutades selliseid strateegiaid nagu maskeeritud pildi vahemällu salvestamine, joonistustoimingute vähendamine ja lõuendi renderdusprotsessi sujuvamaks muutmine. Isegi keerukate või suure jõudlusega seadete korral saate tagada, et maskeerimis- ja ääriste joonistamise protseduurid sujuvad sujuvalt, vähendades mõttetuid toiminguid.

1. Kuidas saan JavaScriptis kasutada mõnda muud pilti ühe maskeerimiseks?
2. Kasutades seatud , joonistage mask lõuendile, et maskeerida kujutist kasutades . Maskiga sobitamiseks kärbitakse esmane pilt.
3. Kuidas luua maskeeritud kujutisele äärist, mis vastab selle kujule?
4. Pärast maski marsruudi koostamist ja , kasutage tehnikat. See võimaldab teil maski kuju ümbritseda isikupärastatud äärisega.
5. Mis on eesmärk lõuendiga manipuleerimisel?
6. Lõuendi sisu muudetakse Base64-kodeeritud pildiks rakenduse kaudu funktsioon, mis muudab selle kasutamise või levitamise PNG-kujutisena lihtsaks.
7. Kuidas saan lõuendi toiminguid jõudluse tagamiseks optimeerida?
8. Lõuendi kiiruse maksimeerimiseks vähendage joonistamistoimingute arvu ja mõelge tavaliselt kasutatavate elementide salvestamisele. See hoiab teie rakenduse tõrgeteta töös ja vähendab uuesti joonistuste arvu.
9. Kas ma saan laadida lõuendile erineva päritoluga pilte?
10. Jah, kuid selleks, et pilt oleks saadaval ilma CORS-i raskusi tekitamata, peate määrama vara juurde .

JavaScripti rakendustes on piltide maskeerimine ja kohandatud ääriste rakendamine lõuendile tõhus viis lihvitud visuaalsete elementide loomiseks. Arendajatel on võimalus manipuleerida piltide renderdamise ja stiiliga, kasutades selleks ja keerukaid joonistuskäske nagu ja tee määratlused.

Sujuva jõudluse tagab ääriste hoolikas optimeerimine ja maskeerimistoimingud, eriti suuremate fotode puhul. See õpetus pakub kasulikku meetodit piiride dünaamiliseks maalimiseks mitteristkülikukujuliste kujutiste ümber, mis on kasulik nii esteetiliselt meeldivate kui ka tundlike veebirakenduste arendamisel.