Cum să utilizați pânza JavaScript pentru a adăuga o chenar personalizată unei imagini mascate

Stăpânirea chenarelor imaginilor mascate în pânza JavaScript

Fuziunea mai multor imagini este o etapă comună în crearea efectelor vizuale JavaScript. Definirea zonelor vizibile ale unei imagini cu o mască este o tehnică frecventă. Deși acest lucru este util pentru crearea de forme unice, poate fi dificil să adăugați un chenar în jurul acelor forme mascate. Deși cel pânză element în JavaScript oferă o manipulare extinsă a imaginii, nu este ușor să ajustați chenarul în jurul unei imagini care a fost mascata.

Dezvoltatorii pot aplica măști și pot decupa imagini în moduri imaginative cu API-ul Canvas, deși în mod implicit, orice chenar generat tinde să se potrivească cu forma dreptunghiulară a pânzei. Când doriți să creați un chenar care se potrivește cu marginile unei forme complicate care este definită de o mască, aceasta prezintă o problemă. Obiectivul este de a urmări călătoria precisă a măștii dincolo de granița dreptunghiulară.

Această postare va explica cum să aplicați o mască de imagine în JavaScript și, mai important, cum să vă asigurați că forma distinctă a imaginii mascate este înconjurată de un chenar. În plus, vom trece peste o funcție care completează mascarea, dar nu are încă o soluție de frontieră definită.

Puteți ajusta aspectul chenarului învățând cum să lucrați cu operațiuni compozite în pânză. Să începem și să vedem cum să folosim funcțiile de pânză JavaScript pentru a adăuga chenarul necesar în jurul unei imagini mascate.

Recunoașterea modului de aplicare a unui chenar unei imagini mascate

Obiectivul scripturilor furnizate este de a folosi o altă imagine ca mască pentru o imagine și apoi de a folosi API-ul Canvas pentru a adăuga un chenar personalizat în jurul formei mascate. Două noi obiecte imagine sunt create la începutul funcției pentru mască și imaginea principală. Când încărcați fotografii din surse externe, setarea de origine încrucișată este esențială pentru a preveni problemele din cauza CORS. Se formează o pânză și proporțiile acesteia sunt ajustate pentru a se potrivi cu imaginea măștii odată ce ambele imagini au fost încărcate. Acest lucru evită problemele de redimensionare în timpul desenării imaginii și garantează că pânza este pregătită pentru lucru cu zona corespunzătoare.

Scriptul folosește apoi drawImage() funcția de a desena imaginea măștii pe pânză. Procedând astfel, masca este aplicată pe pânză, servind drept strat de bază pentru procedura de mascare. Operația globală compozită trebuie setată la „source-in” pentru a aplica corect masca. Pânza este instruită să rețină doar zonele din imaginea principală care coincid cu imaginea măștii. În esență, masca definește forma la care este decupată imaginea principală. Operația compozită este resetată la „sursă peste” atunci când imaginea principală este desenată în interiorul acestei zone de tăiere, permițând acțiuni suplimentare, cum ar fi pictura de chenar, fără a afecta conținutul decupat anterior.

Aplicarea unui chenar pe forma mascata presupune utilizarea accident vascular cerebral () tehnică. Calea sau forma specificată pe pânză este indicată de această comandă. În a doua soluție, moveTo() și lineTo() sunt combinate pentru a genera manual calea pânzei și a urmări marginile măștii. Cu ajutorul acestor tehnici, puteți specifica manual forma chenarului și vă asigurați că aceasta aderă la forma măștii, mai degrabă decât la limita pânzei dreptunghiulare. Aveți control complet asupra aspectului graniței, deoarece lineWidth proprietatea stabilește grosimea chenarului și strokeStyle proprietatea își stabilește culoarea.

În cele din urmă, funcția toDataURL() este folosită pentru a transforma pânza într-un șir Base64. Făcând acest lucru, imaginea finală – inclusiv masca și chenar – este transformată într-un format care este ușor de utilizat în alte zone ale programului sau încărcat pe un server. Pentru a evita greșelile de sincronizare, promisiunea se asigură că această operațiune se încheie numai când ambele imagini s-au încărcat complet. Aceste scripturi arată modul în care tehnicile sofisticate de modificare a imaginii, inclusiv mascarea și aplicarea unui chenar dinamic care se potrivește exact cu contururile măștii, pot fi realizate cu elementul de pânză JavaScript.

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

Îmbunătățirea imaginilor mascate cu chenaruri personalizate în JavaScript

Experiența utilizatorului aplicației dvs. JavaScript poate fi mult îmbunătățită prin capacitatea de a masca imagini și de a seta margini personalizate atunci când aveți de-a face cu API-ul Canvas. Cu ajutorul mascării, puteți decide care zone ale unei imagini sunt vizibile în funcție de o altă imagine, cunoscută sub numele de mască. Adăugarea unui chenar în jurul zonei mascate este o problemă pe care o întâmpină mulți dezvoltatori, în special atunci când masca nu are o formă dreptunghiulară simplă. Proiectele cu margini care se potrivesc exact cu conturul măștii vor părea mai lustruite și mai experte.

O soluție utilă la această problemă este utilizarea API-ului Canvas Calea 2D obiect. Puteți folosi Path2D pentru a proiecta trasee complicate care se potrivesc contururilor măștii dvs. și apoi să le înconjoare cu un chenar. Această metodă vă permite să generați chenare care se potrivesc exact cu colțurile măștii dvs. personalizate, depășind dreptunghiurile convenționale. Folosind moveTo() şi lineTo() împreună facilitează trasarea conturului măștii și garantează o chenar care este aliniată cu precizie.

Performanța este un alt factor important de luat în considerare, în special atunci când lucrați cu imagini mai mari sau când aplicați chenarele dinamic în timp real. Viteza aplicației dvs. poate fi îmbunătățită prin utilizarea unor strategii precum stocarea în cache a imaginii mascate, reducerea operațiunilor de desen și simplificarea procesului de randare a pânzei. Chiar și în setări complicate sau de înaltă performanță, puteți garanta că procedurile de mascare și de desenare a marginilor decurg fără probleme prin reducerea acțiunilor inutile.