Jak použít plátno JavaScriptu k přidání vlastního ohraničení k maskovanému obrázku

Zvládnutí maskovaných okrajů obrázků v JavaScript Canvas

Sloučení více obrázků je běžným krokem při vytváření vizuálních efektů JavaScriptu. Vymezení viditelných oblastí obrazu pomocí masky je častou technikou. Ačkoli je to užitečné pro vytváření jedinečných tvarů, může být náročné přidat ohraničení kolem těchto maskovaných tvarů. Ačkoli prvek v JavaScriptu nabízí rozsáhlou manipulaci s obrázky, není snadné upravit okraj kolem obrázku, který byl maskován.

Vývojáři mohou používat masky a ořezávat obrázky nápaditými způsoby pomocí , ačkoli ve výchozím nastavení má jakýkoli vygenerovaný okraj tendenci odpovídat obdélníkovému tvaru plátna. Pokud chcete vytvořit ohraničení, které odpovídá okrajům složitého tvaru definovaného maskou, představuje to problém. Cílem je sledovat přesnou cestu masky za přímou obdélníkovou hranici.

Tento příspěvek vysvětlí, jak použít masku obrázku v JavaScriptu, a co je důležitější, jak zajistit, aby byl odlišný tvar maskovaného obrázku obklopen okrajem. Dále si projdeme funkci, která dokončí maskování, ale ještě nemá definované řešení hranic.

Vzhled ohraničení můžete doladit tím, že se naučíte pracovat se složenými operacemi na plátně. Začněme a uvidíme, jak používat funkce plátna JavaScriptu k přidání potřebného okraje kolem maskovaného obrázku.

Příkaz	Příklad použití
globalCompositeOperation	Kompozice kreslicích akcí na plátně je definována touto funkcí. GlobalCompositeOperation ='source-in' v příkladu zajišťuje, že obraz masky ořízne hlavní obrázek tak, aby byly vidět pouze oblasti, které se protínají.
toDataURL()	Transformuje informace plátna do obrazu zakódovaného pomocí Base64. To umožňuje použít hotový obrázek jako PNG po použití masky a ohraničení. Výstup obrázku z příkladu je vytvořen pomocí canvas.toDataURL('image/png').
crossOrigin	Tato funkce respektuje bezpečnostní omezení tím, že umožňuje použití obrázků načtených z jiné domény na plátně. MaskImg.crossOrigin = 'anonymní' zaručuje, že přístup k obrazu masky lze provést bez způsobení problémů CORS.
beginPath()	Na plátně lze pomocí této metody spustit novou cestu. Druhá metoda volá ctx.beginPath(), aby se zajistilo, že cesta přilne k obrysu masky při vykreslování vlastního okraje kolem maskovaného obrázku.
moveTo()	Tímto postupem se nevytvářejí žádné výkresy; místo toho se "pero" přesune na nové místo začátku. Počáteční bod ohraničení je v příkladu umístěn pomocí ctx.moveTo(0, 0), což je nezbytné pro přesné nakreslení ohraničení kolem hranic masky.
lineTo()	Pomocí zadaných souřadnic jako výchozího bodu tato technika nakreslí přímku. Hranice maskovaného obrázku je definována čarami nakreslenými v řešení pomocí ctx.lineTo(maskImg.width, 0).
stroke()	Podél určené cesty nakreslí hranice nebo čáry. Například moveTo() a lineTo() se používají k definování formuláře masky a pak se ctx.stroke() používá k použití ohraničení kolem maskovaného obrázku.
lineWidth	Určuje, jak silné jsou čáry namalované na plátně. Skript vytvoří kolem tvaru masky tloušťku 5 pixelů pomocí ctx.lineWidth = 5.
strokeStyle	Označuje barvu nebo styl ohraničení. Barva ohraničení v příkladu je nastavena na červenou pomocí ctx.strokeStyle ='red'.

Rozpoznání toho, jak použít ohraničení na maskovaný obrázek

Cílem poskytnutých skriptů je použít jiný obrázek jako masku pro jeden obrázek a poté použít přidat vlastní ohraničení kolem maskovaného tvaru. Na začátku funkce pro masku a hlavní obrázek se vytvoří dva nové objekty obrázku. Při načítání fotografií z externích zdrojů je nastavení křížového původu nezbytné, aby se předešlo problémům způsobeným CORS. Po načtení obou obrázků se vytvoří plátno a jeho proporce se upraví tak, aby odpovídala obrazu masky. Vyhnete se tak problémům se změnou velikosti během kreslení obrazu a zaručíte, že plátno je připraveno pro práci s příslušnou oblastí.

Skript pak používá funkce pro nakreslení obrazu masky na plátno. Přitom se maska ​​nanese na plátno a slouží jako podkladová vrstva pro maskovací proceduru. Globální složená operace musí být nastavena na "source-in", aby byla maska ​​aplikována správně. Plátno má pokyn zachovat pouze oblasti primárního obrazu, které se shodují s obrazem masky. Maska v podstatě definuje tvar, do kterého je hlavní obrázek oříznut. Když je hlavní obrázek nakreslen uvnitř této oblasti oříznutí, složená operace se resetuje na "source-over", což umožňuje další akce, jako je malování ohraničení, aniž by to ovlivnilo dříve oříznutý obsah.

Použití ohraničení na maskovaný tvar zahrnuje použití technika. Zadaná cesta nebo formulář na plátně je označen tímto příkazem. Ve druhém řešení jsou moveTo() a lineTo() zkombinovány, aby ručně vygenerovaly cestu plátna a obkreslily okraje masky. Pomocí těchto technik můžete ručně určit tvar okraje a ujistit se, že se drží spíše tvaru masky než obdélníkového okraje plátna. Máte úplnou kontrolu nad vzhledem hranice, protože vlastnost nastavuje tloušťku ohraničení a vlastnost nastavuje jeho barvu.

Nakonec se funkce toDataURL() používá k transformaci plátna na řetězec Base64. Tímto způsobem se hotový obrázek – včetně masky a ohraničení – převede do formátu, který je snadno použitelný v jiných oblastech programu nebo se nahraje na server. Aby se předešlo chybám v načasování, slib zajišťuje, že tato operace skončí až po úplném načtení obou obrázků. Tyto skripty ukazují, jak lze pomocí prvku plátna JavaScriptu provádět sofistikované techniky úpravy obrázků, včetně maskování a aplikace dynamického ohraničení, které přesně odpovídá obrysům 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šení maskovaných obrázků pomocí vlastních okrajů v JavaScriptu

Uživatelský zážitek z vaší JavaScriptové aplikace může být výrazně vylepšen možností maskování obrázků a nastavení vlastních hranic při práci s . Pomocí maskování se můžete rozhodnout, které oblasti obrázku jsou viditelné v závislosti na jiném obrázku, známém jako maska. Přidání okraje kolem maskované zóny je problém, se kterým se setká mnoho vývojářů, zvláště když maska ​​nemá přímočarý obdélníkový tvar. Projekty s okraji, které přesně odpovídají obrysu masky, budou vypadat uhlazenější a odbornější.

Užitečným řešením tohoto problému je použití Canvas API objekt. Path2D můžete použít k navrhování složitých tras, které odpovídají obrysům vaší masky, a poté je obklopit ohraničením. Tato metoda vám umožňuje generovat okraje, které přesně odpovídají rohům vaší vlastní masky a jdou nad rámec běžných obdélníků. Použití a dohromady usnadňuje sledování obrysu masky a zaručuje přesné zarovnání okraje.

Výkon je dalším důležitým faktorem, který je třeba vzít v úvahu, zejména při práci s většími obrázky nebo dynamické aplikaci okrajů v reálném čase. Rychlost vaší aplikace lze zlepšit využitím strategií, jako je ukládání maskovaného obrázku do mezipaměti, omezení operací kreslení a zefektivnění procesu vykreslování plátna. I ve složitých nebo vysoce výkonných nastaveních můžete zaručit, že maskování a vykreslování ohraničení proběhnou hladce, a to omezením zbytečných akcí.

1. Jak mohu v JavaScriptu použít jiný obrázek k maskování?
2. Použití nastavit na , nakreslete masku na plátno, abyste maskovali obrázek pomocí . Aby se maska ​​shodovala, ořízne se primární obrázek.
3. Jak mohu vytvořit ohraničení maskovaného obrázku, které odpovídá jeho tvaru?
4. Po stanovení trasy masky pomocí a , použijte technika. To vám umožní obklopit tvar masky personalizovaným okrajem.
5. Jaký je účel při manipulaci s plátnem?
6. Obsah plátna se transformuje do obrazu zakódovaného pomocí Base64 pomocí funkce, což usnadňuje použití nebo distribuci jako obrázek PNG.
7. Jak mohu optimalizovat operace plátna pro výkon?
8. Snižte množství operací kreslení a myslete na ukládání běžně používaných prvků, abyste maximalizovali rychlost plátna. Vaše aplikace tak bude fungovat hladce a sníží se počet překreslování.
9. Mohu na plátno načíst obrázky z různých zdrojů?
10. Ano, ale aby byl obrázek dostupný bez problémů s CORS, musíte nastavit majetek do .

V aplikacích JavaScript je maskování obrázků a použití vlastních okrajů na plátně efektivním způsobem, jak vytvořit vyleštěné vizuální prvky. Vývojáři mají možnost manipulovat s vykreslováním a stylováním obrázků pomocí a sofistikované kreslicí příkazy jako např a definice cest.

Hladký výkon je zajištěn pečlivou optimalizací operací ohraničení a maskování, zejména u větších fotografií. Tento tutoriál poskytuje užitečnou metodu pro dynamické malování okrajů kolem nepravoúhlých obrázků, což je užitečné při vývoji online aplikací, které jsou esteticky příjemné a reagují.