Hogyan használhatjuk a JavaScript Canvas-ját egyéni szegély hozzáadásához egy maszkolt képhez

Maszkolt képszegélyek elsajátítása JavaScript vászonban

A több kép egyesítése gyakori lépés a JavaScript vizuális effektusok létrehozásában. A kép látható területeinek maszkkal történő meghatározása gyakori technika. Bár ez hasznos egyedi formák létrehozásához, kihívást jelenthet szegélyt felvenni a maszkolt alakzatok köré. Bár a vászon A JavaScript eleme kiterjedt képkezelést kínál, nem könnyű beállítani a maszkolt kép körüli szegélyt.

A fejlesztők ötletes módon alkalmazhatnak maszkokat és klipképeket a Canvas API, bár alapértelmezés szerint a generált szegélyek általában megegyeznek a vászon téglalap alakú formájával. Ha olyan szegélyt szeretne létrehozni, amely illeszkedik egy maszk által meghatározott bonyolult alakzat éleihez, ez problémát jelent. A cél az, hogy nyomon kövesse a maszk precíz útját az egyenes téglalap alakú határon túl.

Ez a bejegyzés elmagyarázza, hogyan kell képmaszkot alkalmazni JavaScriptben, és ami még fontosabb, hogyan biztosítható, hogy a maszkolt kép határozott alakját keret veszi körül. Ezenkívül átmegyünk egy olyan függvényen, amely befejezi a maszkolást, de még nem rendelkezik meghatározott határmegoldással.

Finomhangolhatja a szegély megjelenését, ha megtanulja, hogyan kell összetett műveleteket végezni vásznon. Kezdjük, és nézzük meg, hogyan használhatjuk a JavaScript vászonfunkcióit a szükséges szegély hozzáadásához egy maszkolt kép köré.

Annak felismerése, hogyan kell szegélyt alkalmazni egy maszkolt képre

A rendelkezésre álló szkriptek célja, hogy egy másik képet használjanak maszkként egy képhez, majd a Canvas API egyéni szegély hozzáadásához a maszkolt alakzat köré. A funkció elején két új képobjektum jön létre a maszk és a fő kép számára. Fényképek külső forrásból történő betöltésekor a kereszteredetű beállítás elengedhetetlen a CORS okozta problémák megelőzése érdekében. Mindkét kép betöltése után létrejön egy vászon, és annak arányai a maszkképhez igazodjanak. Ez elkerüli a képrajzolás során felmerülő átméretezési problémákat, és garantálja, hogy a vászon felkészült a megfelelő területtel való munkára.

A szkript ezután a drawImage() funkcióval a maszk képét a vászonra rajzolhatja. Ennek során a maszkot felvisszük a vászonra, amely a maszkolási eljárás alaprétegeként szolgál. A globális összetett műveletet "source-in" értékre kell állítani a maszk helyes alkalmazása érdekében. A vászon az elsődleges képnek csak azokat a területeit tartsa meg, amelyek egybeesnek a maszk képével. Lényegében a maszk határozza meg azt az alakzatot, amelyre a fő képet vágja. Az összetett művelet visszaáll "forrás-over"-re, amikor a fő képet a vágási területen belül rajzolják meg, és további műveleteket tesz lehetővé, például a szegélyfestést anélkül, hogy befolyásolná a korábban kivágott tartalmat.

A maszkolt alakzat szegélyének alkalmazása magában foglalja a stroke () technika. Ez a parancs jelzi a megadott elérési utat vagy űrlapot a vásznon. A második megoldásban a moveTo() és a lineTo() kombinációval manuálisan generálják a vászon útvonalát, és nyomon követik a maszk határait. Ezeknek a technikáknak a használatával manuálisan megadhatja a szegély alakját, és megbizonyosodhat arról, hogy az a maszk alakjához tapad, nem pedig a téglalap alakú vászon határához. A határ megjelenése felett teljes mértékben rendelkezel, mert a vonalszélesség tulajdonság beállítja a szegély vastagságát és a strokeStyle tulajdonság határozza meg a színét.

Végül a toDataURL() függvény a vászon Base64 karakterláncsá alakítására szolgál. Ezzel a kész kép – a maszkot és a szegélyt is beleértve – olyan formátummá alakul, amelyet a program más területein is könnyen felhasználhatunk, vagy feltölthetünk egy szerverre. Az időzítési hibák elkerülése érdekében az ígéret gondoskodik arról, hogy ez a művelet csak akkor érjen véget, ha mindkét kép teljesen betöltődött. Ezek a szkriptek bemutatják, hogy a JavaScript vászonelemével hogyan lehet kifinomult képmódosítási technikákat megvalósítani, beleértve a maszkolást és a maszk körvonalaihoz pontosan illeszkedő dinamikus szegély alkalmazását.

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

Maszkolt képek javítása egyéni szegélyekkel JavaScriptben

A JavaScript-alkalmazás felhasználói élményét nagymértékben javíthatja, ha képes maszkolni a képeket és egyéni szegélyeket beállítani a Canvas API. A maszkolás segítségével eldöntheti, hogy a kép mely területei legyenek láthatók egy másik képtől, az úgynevezett maszktól függően. A maszkolt zóna körüli szegély hozzáadása olyan probléma, amellyel sok fejlesztő találkozik, különösen akkor, ha a maszk nem egyszerű téglalap alakú. Azok a projektek, amelyek keretei pontosan illeszkednek a maszk körvonalához, kifinomultabbnak és szakértőbbnek tűnnek.

A probléma hasznos megoldása a Canvas API használata Path2D objektum. A Path2D segítségével bonyolult útvonalakat tervezhet, amelyek illeszkednek a maszk körvonalaihoz, majd szegéllyel veszik körül azokat. Ezzel a módszerrel olyan szegélyeket hozhat létre, amelyek pontosan illeszkednek az egyéni maszk sarkaihoz, túlmutatva a hagyományos téglalapokon. Használata moveTo() és lineTo() együtt megkönnyíti a maszk körvonalának nyomon követését, és garantálja a pontosan igazított szegélyt.

A teljesítmény egy másik fontos tényező, amelyet figyelembe kell venni, különösen akkor, ha nagyobb képekkel dolgozik vagy dinamikusan, valós időben alkalmaz szegélyeket. Az alkalmazás sebessége növelhető olyan stratégiák alkalmazásával, mint a maszkolt kép gyorsítótárazása, a rajzolási műveletek csökkentése és a vászon megjelenítési folyamatának egyszerűsítése. Még bonyolult vagy nagy teljesítményű beállítások esetén is garantálhatja, hogy a maszkolási és szegélyrajzolási folyamatok zökkenőmentesen menjenek végbe az értelmetlen műveletek csökkentésével.