Ako použiť plátno JavaScriptu na pridanie vlastného orámovania k maskovanému obrázku

Zvládnutie maskovaných okrajov obrázkov v JavaScript Canvas

Fúzia viacerých obrázkov je bežným krokom pri vytváraní vizuálnych efektov JavaScriptu. Definovanie viditeľných oblastí obrazu pomocou masky je častou technikou. Aj keď je to užitočné pri vytváraní jedinečných foriem, môže byť náročné pridať orámovanie okolo týchto maskovaných tvarov. Hoci prvok v JavaScripte ponúka rozsiahlu manipuláciu s obrázkami, nie je jednoduché upraviť okraj okolo obrázka, ktorý bol maskovaný.

Vývojári môžu použiť masky a orezať obrázky nápaditými spôsobmi pomocou , hoci v predvolenom nastavení má akýkoľvek vytvorený okraj tendenciu zodpovedať obdĺžnikovému tvaru plátna. Ak chcete vytvoriť okraj, ktorý sa zhoduje s okrajmi komplikovaného tvaru, ktorý je definovaný maskou, predstavuje to problém. Cieľom je sledovať presnú cestu masky za priamu pravouhlú hranicu.

Tento príspevok vysvetlí, ako použiť masku obrázka v JavaScripte, a čo je ešte dôležitejšie, ako zabezpečiť, aby bol odlišný tvar maskovaného obrázka obklopený okrajom. Okrem toho si prejdeme funkciu, ktorá dokončí maskovanie, ale ešte nemá definované riešenie hraníc.

Vzhľad okraja môžete doladiť tak, že sa naučíte pracovať s kompozitnými operáciami na plátne. Začnime a uvidíme, ako použiť funkcie plátna JavaScriptu na pridanie potrebného okraja okolo maskovaného obrázka.

Príkaz	Príklad použitia
globalCompositeOperation	Kompozícia kresliacich akcií na plátne je definovaná touto vlastnosťou. GlobalCompositeOperation ='source-in' v príklade zaisťuje, že obrázok masky orezáva hlavný obrázok tak, že sú viditeľné iba oblasti, ktoré sa pretínajú.
toDataURL()	Transformuje informácie na plátne na obrázok zakódovaný pomocou Base64. To umožňuje použiť hotový obrázok ako PNG po použití masky a okraja. Výstup obrázka z príkladu je vytvorený pomocou canvas.toDataURL('image/png').
crossOrigin	Táto funkcia rešpektuje bezpečnostné obmedzenia tým, že umožňuje použitie obrázkov načítaných z inej domény na plátne. MaskImg.crossOrigin = 'anonymný' zaručuje, že prístup k obrázku masky je možné vykonať bez spôsobenia problémov CORS.
beginPath()	Na plátne možno pomocou tejto metódy začať novú cestu. Druhá metóda volá ctx.beginPath(), aby sa zabezpečilo, že cesta priľne k obrysu masky, keď okolo maskovaného obrázku vykreslí vlastný okraj.
moveTo()	Pri tomto postupe sa nevytvárajú žiadne výkresy; namiesto toho sa "pero" presunie na nové miesto začiatku. Počiatočný bod okraja je v príklade umiestnený pomocou ctx.moveTo(0, 0), čo je nevyhnutné na presné nakreslenie okraja okolo hraníc masky.
lineTo()	Použitím daných súradníc ako východiskového bodu táto technika nakreslí priamku. Hranica maskovaného obrázku je definovaná čiarami nakreslenými v riešení pomocou ctx.lineTo(maskImg.width, 0).
stroke()	Pozdĺž určenej cesty nakreslí hranice alebo čiary. Napríklad moveTo() a lineTo() sa používajú na definovanie formy masky a potom sa ctx.stroke() používa na aplikovanie okraja okolo maskovaného obrázka.
lineWidth	Určuje, ako hrubé sú čiary namaľované na plátne. Skript vytvorí 5-pixelový hrubý okraj okolo tvaru masky pomocou ctx.lineWidth = 5.
strokeStyle	Označuje farbu alebo štýl okraja. Farba okraja v príklade je nastavená na červenú pomocou ctx.strokeStyle ='red'.

Rozpoznanie toho, ako použiť orámovanie na maskovaný obrázok

Cieľom poskytnutých skriptov je použiť iný obrázok ako masku pre jeden obrázok a potom použiť obrázok na pridanie vlastného okraja okolo maskovaného tvaru. Na začiatku funkcie sa vytvoria dva nové objekty obrázka pre masku a hlavný obrázok. Pri načítavaní fotografií z externých zdrojov je nastavenie krížového pôvodu nevyhnutné, aby sa predišlo problémom spôsobeným CORS. Po načítaní oboch obrázkov sa vytvorí plátno a jeho proporcie sa upravia tak, aby zodpovedali obrazu masky. Vyhnete sa tak problémom so zmenou veľkosti počas kreslenia obrazu a zaručíte, že plátno je pripravené na prácu s príslušnou plochou.

Skript potom používa funkcia na nakreslenie obrazu masky na plátno. Pritom sa maska ​​nanesie na plátno a slúži ako základná vrstva pre maskovaciu procedúru. Globálna zložená operácia musí byť nastavená na "source-in", aby sa maska ​​použila správne. Plátno dostane pokyn, aby si zachovalo len oblasti primárneho obrazu, ktoré sa zhodujú s obrazom masky. Maska v podstate definuje tvar, do ktorého je hlavný obrázok orezaný. Keď je hlavný obrázok nakreslený v tejto oblasti orezania, zložená operácia sa resetuje na "source-over", čo umožňuje ďalšie akcie, ako je maľovanie okrajov, bez toho, aby to ovplyvnilo predtým orezaný obsah.

Použitie okraja na maskovaný tvar zahŕňa použitie technika. Zadaná cesta alebo formulár na plátne je označený týmto príkazom. V druhom riešení sa moveTo() a lineTo() kombinujú na manuálne generovanie cesty plátna a sledovanie hraníc masky. Pomocou týchto techník môžete ručne určiť tvar okraja a uistiť sa, že sa drží skôr tvaru masky než obdĺžnikového okraja plátna. Máte úplnú kontrolu nad vzhľadom hranice, pretože vlastnosť nastavuje hrúbku okraja a vlastnosť nastavuje svoju farbu.

Nakoniec sa funkcia toDataURL() používa na transformáciu plátna na reťazec Base64. Takto sa hotový obrázok – vrátane masky a okraja – transformuje do formátu, ktorý sa dá ľahko použiť v iných oblastiach programu alebo sa nahrá na server. Aby sa predišlo chybám v načasovaní, prísľub zaisťuje, že táto operácia sa skončí až po úplnom načítaní oboch obrázkov. Tieto skripty ukazujú, ako je možné pomocou prvku plátna JavaScriptu dosiahnuť sofistikované techniky úpravy obrázkov vrátane maskovania a aplikácie dynamického okraja, ktorý presne zodpovedá obrysom masky.

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

Vylepšenie maskovaných obrázkov pomocou vlastných okrajov v JavaScripte

Používateľský zážitok z vašej aplikácie JavaScript môže byť výrazne vylepšený možnosťou maskovania obrázkov a nastavenia vlastných hraníc pri práci s . Pomocou maskovania sa môžete rozhodnúť, ktoré oblasti obrázka sú viditeľné v závislosti od iného obrázka, známeho ako maska. Pridanie okraja okolo maskovanej zóny je problém, s ktorým sa stretávajú mnohí vývojári, najmä ak maska ​​nemá priamy obdĺžnikový tvar. Projekty s okrajmi, ktoré presne zodpovedajú obrysu masky, budú pôsobiť uhladenejšie a odbornejšie.

Užitočným riešením tohto problému je použitie Canvas API objekt. Path2D môžete použiť na navrhovanie zložitých trás, ktoré zodpovedajú obrysom vašej masky, a potom ich obklopiť okrajom. Táto metóda vám umožňuje generovať okraje, ktoré presne zodpovedajú rohom vašej vlastnej masky a presahujú rámec konvenčných obdĺžnikov. Používanie a spolu uľahčuje sledovanie obrysu masky a zaručuje presne zarovnaný okraj.

Výkon je ďalším dôležitým faktorom, ktorý treba brať do úvahy, najmä pri práci s väčšími obrázkami alebo dynamickej aplikácii okrajov v reálnom čase. Rýchlosť vašej aplikácie sa dá zlepšiť použitím stratégií, ako je ukladanie maskovaného obrázka do vyrovnávacej pamäte, obmedzenie operácií kreslenia a zefektívnenie procesu vykresľovania plátna. Dokonca aj v zložitých alebo vysokovýkonných nastaveniach môžete zaručiť, že postupy maskovania a kreslenia okrajov prebehnú hladko, a to znížením nezmyselných akcií.

1. Ako môžem v JavaScripte použiť iný obrázok na maskovanie?
2. Používanie nastaviť na , nakreslite masku na plátno, aby ste zamaskovali obrázok pomocou . Aby sa maska ​​zhodovala, oreže primárny obrázok.
3. Ako môžem vytvoriť rám pre maskovaný obrázok, ktorý zodpovedá jeho tvaru?
4. Po stanovení trasy masky s a , použite technika. To vám umožní obkolesiť tvar masky prispôsobeným okrajom.
5. Aký je účel pri manipulácii s plátnom?
6. Obsah plátna sa transformuje do obrazu zakódovaného v Base64 prostredníctvom funkcia, ktorá uľahčuje používanie alebo distribúciu ako obrázok PNG.
7. Ako môžem optimalizovať operácie plátna pre výkon?
8. Znížte množstvo operácií kreslenia a premýšľajte o ukladaní bežne používaných prvkov, aby ste maximalizovali rýchlosť plátna. Vďaka tomu bude vaša aplikácia fungovať hladko a zníži sa počet prekreslení.
9. Môžem načítať obrázky z rôznych zdrojov na plátno?
10. Áno, ale ak chcete sprístupniť obrázok bez toho, aby ste spôsobili problémy s CORS, musíte nastaviť majetok do .

V aplikáciách JavaScript je maskovanie obrázkov a aplikovanie vlastných okrajov na plátno efektívnym spôsobom, ako vytvoriť vylepšené vizuálne prvky. Vývojári majú možnosť manipulovať s vykresľovaním a štýlom obrázkov pomocou a sofistikované príkazy na kreslenie ako napr a definície ciest.

Hladký výkon je zabezpečený starostlivou optimalizáciou operácií okrajov a maskovania, najmä pri väčších fotografiách. Tento tutoriál poskytuje užitočnú metódu na dynamické maľovanie okrajov okolo obrázkov, ktoré nie sú pravouhlé, čo je užitočné pri vývoji online aplikácií, ktoré sú esteticky príjemné a zároveň reagujú.