Kako uporabiti platno JavaScripta za dodajanje obrobe po meri maskirani sliki

1. način: Uporaba metode Canvas in Stroke za dodajanje obrobe po meri maskirani sliki

Za izgradnjo obrobe okoli maskirane slike ta pristop uporablja JavaScript in Canvas API. Stroke() se uporablja za obris maskirane oblike.

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

2. možnost: ustvarite obrobo po meri okoli oblike maske s pomočjo poti platna

Ta metoda zagotavlja, da obroba natančno sledi maskirani obliki, tako da sledi poti maske slike z uporabo API-ja Canvas z 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;
    });
}

Pogosta vprašanja o maskiranju in obrobljanju slik s platnom

1. Kako lahko v JavaScriptu uporabim drugo sliko za maskiranje ene?
2. Uporaba 2 nastavite na 'source-in', narišite masko na platno, da zakrijete sliko z uporabo Canvas API. Da bi se ujemala z masko, bo to obrezalo primarno sliko.
3. Kako lahko ustvarim obrobo maskirane slike, ki ustreza njeni obliki?
4. Po vzpostavitvi poti maske z moveTo() in lineTo(), uporabite stroke() tehnika. To vam bo omogočilo, da obkrožite obliko maske s prilagojenim robom.
5. Kaj je namen toDataURL() v manipulaciji s platnom?
6. Vsebina platna se pretvori v sliko, kodirano z Base64 prek toDataURL() funkcija, ki omogoča preprosto uporabo ali distribucijo kot sliko PNG.
7. Kako lahko optimiziram operacije platna za učinkovitost?
8. Zmanjšajte število operacij risanja in razmislite o shranjevanju pogosto uporabljenih elementov, da povečate hitrost platna. Tako vaša aplikacija deluje nemoteno in zmanjša število ponovnih risb.
9. Ali lahko na platno naložim slike drugega izvora?
10. Da, toda če želite, da bo slika na voljo brez povzročanja težav CORS, morate nastaviti crossOrigin premoženje do 'anonymous'.

Končne misli o maskiranju in mejah

V aplikacijah JavaScript je maskiranje slik in uporaba obrob po meri na platnu učinkovit način za ustvarjanje uglajenih vizualnih elementov. Razvijalci imajo možnost, da manipulirajo z upodabljanjem in oblikovanjem slik z uporabo Canvas API in sofisticirane ukaze za risanje, kot je npr kap() in definicije poti.

Nemoteno delovanje je zagotovljeno s skrbnim optimiziranjem operacij obrob in mask, zlasti za večje fotografije. Ta vadnica ponuja uporabno metodo za dinamično slikanje obrob okrog nepravokotnih slik, kar je uporabno pri razvoju spletnih aplikacij, ki so tako estetsko prijetne kot odzivne.