Kako koristiti JavaScript Canvas za dodavanje prilagođenog obruba maskiranoj slici

Metoda 1: Korištenje metode platna i poteza za dodavanje prilagođenog obruba maskiranoj slici

Kako bi se izgradio obrub oko maskirane slike, ovaj pristup koristi JavaScript i Canvas API. Stroke() se koristi za ocrtavanje maskiranog oblika.

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

Opcija 2: Stvorite prilagođeni obrub oko oblika maske pomoću putanje platna

Ova metoda osigurava da obrub usko prati maskirani oblik slijedeći putanju maske slike pomoću Canvas API-ja s JavaScriptom.

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

Često postavljana pitanja o maskiranju i obrubljivanju slika pomoću platna

1. U JavaScriptu, kako mogu koristiti drugu sliku za maskiranje jedne?
2. Korištenje 2 postaviti na 'source-in', nacrtajte masku na platnu kako biste maskirali sliku pomoću Canvas API. Kako bi se uskladila maska, ovo će izrezati primarnu sliku.
3. Kako mogu stvoriti obrub maskirane slike koji odgovara njezinom obliku?
4. Nakon utvrđivanja rute maske s moveTo() i lineTo(), koristite stroke() tehnika. To će vam omogućiti da zaokružite oblik maske personaliziranim rubom.
5. Koja je svrha toDataURL() u manipulaciji platnom?
6. Sadržaj platna pretvara se u Base64 kodiranu sliku putem toDataURL() funkcija, što ga čini jednostavnim za korištenje ili distribuciju kao PNG slike.
7. Kako mogu optimizirati operacije platna za izvedbu?
8. Smanjite količinu operacija crtanja i razmislite o pohranjivanju često korištenih elemenata kako biste povećali brzinu platna. Time vaša aplikacija radi glatko i smanjuje se broj ponovnih crtanja.
9. Mogu li učitati slike različitih izvora na platnu?
10. Da, ali kako bi slika bila dostupna bez izazivanja poteškoća s CORS-om, trebate postaviti crossOrigin vlasništvo na 'anonymous'.

Završne misli o maskiranju i granicama

U JavaScript aplikacijama maskiranje slika i primjena prilagođenih obruba na platnu učinkovit je način za stvaranje uglađenih vizualnih elemenata. Programeri imaju mogućnost manipulirati prikazivanjem i stiliziranjem slika korištenjem Canvas API i sofisticirane naredbe za crtanje kao što su moždani udar () i definicije puta.

Glatka izvedba osigurana je pažljivim optimiziranjem operacija obruba i maskiranja, posebno za veće fotografije. Ovaj vodič pruža korisnu metodu za dinamičko crtanje obruba oko nepravokutnih slika, što je korisno pri razvoju online aplikacija koje su i estetski ugodne i osjetljive.