Sådan bruger du JavaScripts lærred til at tilføje en brugerdefineret kant til et maskeret billede

Mestring af maskerede billedkanter i JavaScript Canvas

Sammensmeltning af flere billeder er et almindeligt trin i skabelsen af ​​visuelle JavaScript-effekter. At definere de synlige områder af et billede med en maske er en hyppig teknik. Selvom dette er nyttigt til at skabe unikke former, kan det være udfordrende at tilføje en kant omkring disse maskerede former. Selvom lærred element i JavaScript tilbyder omfattende billedmanipulation, er det ikke nemt at justere grænsen omkring et billede, der er blevet maskeret.

Udviklere kan anvende masker og klippe billeder på fantasifulde måder med Canvas API, selvom enhver generet ramme som standard har en tendens til at matche lærredets rektangulære form. Når du ønsker at skabe en kant, der matcher kanterne af en kompliceret form, der er defineret af en maske, giver dette et problem. Målet er at følge maskens præcise rejse ud over den ligefremme rektangulære grænse.

Dette indlæg vil forklare, hvordan man anvender en billedmaske i JavaScript, og mere afgørende, hvordan man sikrer, at den distinkte form af det maskerede billede er omgivet af en kant. Derudover vil vi gennemgå en funktion, der fuldender maskeringen, men som endnu ikke har en defineret grænseløsning.

Du kan finjustere grænsens udseende ved at lære at arbejde med sammensatte operationer i lærred. Lad os komme i gang og se, hvordan du bruger JavaScripts lærredsfunktioner til at tilføje den nødvendige kant omkring et maskeret billede.

Genkendelse af, hvordan man anvender en kant på et maskeret billede

Formålet med de scripts, der leveres, er at bruge et andet billede som en maske for et billede og derefter bruge Canvas API for at tilføje en brugerdefineret kant rundt om den maskerede form. To nye billedobjekter oprettes i starten af ​​funktionen for masken og hovedbilledet. Når du indlæser fotos fra eksterne kilder, er indstillingen for krydsoprindelse afgørende for at forhindre problemer på grund af CORS. Der dannes et lærred, og dets proportioner justeres, så det passer til maskebilledet, når begge billeder er blevet indlæst. Dette undgår problemer med størrelsesændring under billedtegning og garanterer, at lærredet er forberedt til arbejde med det passende område.

Scriptet bruger derefter drawImage() funktion til at tegne maskebilledet på lærredet. Derved påføres masken på lærredet, der fungerer som fundamentet for maskeringsproceduren. Den globale sammensatte handling skal indstilles til "kilde-ind" for at anvende masken korrekt. Lærredet instrueres i kun at beholde de områder af det primære billede, der falder sammen med maskebilledet. I det væsentlige definerer masken den form, som hovedbilledet klippes til. Den sammensatte handling nulstilles til "kilde-over", når hovedbilledet tegnes inde i dette klippeområde, hvilket muliggør yderligere handlinger som kantmaling uden at påvirke det tidligere klippede indhold.

Anvendelse af en kant på den maskerede form involverer brug af streg() teknik. Den angivne sti eller formular på lærredet er angivet med denne kommando. I den anden løsning kombineres moveTo() og lineTo() for manuelt at generere lærredsstien og spore maskens grænser. Ved at bruge disse teknikker kan du manuelt specificere kantens form og sikre dig, at den klæber til maskens form i stedet for den rektangulære lærredsgrænse. Du har fuldstændig kontrol over grænsens udseende, fordi linjebredde egenskab sætter grænsens tykkelse og stregstil egenskaben sætter sin farve.

Til sidst bruges toDataURL()-funktionen til at transformere lærredet til en Base64-streng. Ved at gøre dette omdannes det færdige billede - maske og kant inkluderet - til et format, der let kan bruges i andre områder af programmet eller uploades til en server. For at undgå timingfejl sikrer løftet, at denne operation først slutter, når begge billeder er fuldt indlæst. Disse scripts viser, hvordan sofistikerede billedmodifikationsteknikker, herunder maskering og anvendelse af en dynamisk kant, der matcher maskens konturer, kan opnås med JavaScripts lærredselement.

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

Forbedring af maskerede billeder med brugerdefinerede rammer i JavaScript

Brugeroplevelsen af ​​din JavaScript-applikation kan forbedres betydeligt af evnen til at maskere billeder og indstille brugerdefinerede rammer, når du håndterer Canvas API. Ved hjælp af maskering kan du bestemme, hvilke områder af et billede, der er synlige, afhængigt af et andet billede, kendt som masken. Tilføjelse af en kant omkring den maskerede zone er et problem, som mange udviklere støder på, især når masken ikke har en ligetil rektangulær form. Projekter med kanter, der præcist matcher maskens omrids, vil fremstå mere polerede og eksperter.

En nyttig løsning på dette problem er at bruge Canvas API Sti2D objekt. Du kan bruge Path2D til at designe indviklede ruter, der passer til din maskes konturer og derefter omgive dem med en kant. Denne metode giver dig mulighed for at generere grænser, der præcist matcher hjørnerne af din brugerdefinerede maske, der går ud over konventionelle rektangler. Bruger moveTo() og lineTo() sammen gør det lettere at spore maskens omrids og garanterer en kant, der er præcist justeret.

Ydeevne er en anden vigtig faktor at tage højde for, især når du arbejder med større billeder eller anvender grænser dynamisk i realtid. Din applikations hastighed kan forbedres ved at anvende strategier som caching af det maskerede billede, skære ned på tegneoperationer og strømline lærredsgengivelsesprocessen. Selv i indviklede eller højtydende indstillinger kan du garantere, at maskerings- og grænsetegningsprocedurerne går glat ved at reducere meningsløse handlinger.