Kā izmantot JavaScript audeklu, lai maskētam attēlam pievienotu pielāgotu apmali

1. metode: audekla un vilkšanas metodes izmantošana, lai maskētam attēlam pievienotu pielāgotu apmali

Lai izveidotu apmali ap maskēto attēlu, šī pieeja izmanto JavaScript un Canvas API. Stroke() tiek izmantots, lai iezīmētu maskētās formas kontūru.

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. iespēja: izveidojiet pielāgotu apmali ap maskas formu, izmantojot audekla ceļu

Šī metode nodrošina, ka apmale cieši seko maskētajai formai, sekojot attēla maskas ceļam, izmantojot Canvas API ar JavaScript.

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

Bieži uzdotie jautājumi par attēlu maskēšanu un apmalošanu, izmantojot kanvas

1. Kā es varu izmantot citu attēlu, lai maskētu JavaScript?
2. Izmantojot 2 iestatīts uz 'source-in', uzzīmējiet masku uz audekla, lai maskētu attēlu, izmantojot Canvas API. Lai atbilstu maskai, primārais attēls tiks apgriezts.
3. Kā es varu izveidot apmali maskētam attēlam, kas atbilst tā formai?
4. Pēc maskas maršruta noteikšanas ar moveTo() un lineTo(), izmantojiet stroke() tehnika. Tas ļaus jums apvilkt maskas formu ar personalizētu apmali.
5. Kāds ir mērķis toDataURL() audekla manipulācijās?
6. Audekla saturs tiek pārveidots par Base64 kodētu attēlu, izmantojot toDataURL() funkcija, padarot to vienkāršu lietošanu vai izplatīšanu kā PNG attēlu.
7. Kā es varu optimizēt kanvas darbības veiktspējai?
8. Samaziniet zīmēšanas darbību skaitu un padomājiet par bieži izmantoto elementu glabāšanu, lai maksimāli palielinātu audekla ātrumu. Tas nodrošina jūsu lietojumprogrammas nevainojamu darbību un samazina pārzīmēšanas gadījumu skaitu.
9. Vai audeklā var ielādēt dažādus izcelsmes attēlus?
10. Jā, bet, lai attēls būtu pieejams, neradot CORS grūtības, ir jāiestata crossOrigin īpašumu uz 'anonymous'.

Pēdējās domas par maskēšanu un robežām

JavaScript lietotnēs attēlu maskēšana un pielāgotu apmaļu lietošana audeklā ir efektīvs veids, kā izveidot slīpētus vizuālos elementus. Izstrādātājiem ir iespēja manipulēt ar attēlu renderēšanu un stilu, izmantojot Canvas API un sarežģītas zīmēšanas komandas, piemēram, insults () un ceļu definīcijas.

Vienmērīga veiktspēja tiek nodrošināta, rūpīgi optimizējot apmales un maskēšanas darbības, īpaši lielākiem fotoattēliem. Šī apmācība sniedz noderīgu metodi, lai dinamiski apzīmētu robežas ap attēliem, kas nav taisnstūrveida, un tas ir noderīgi, izstrādājot tiešsaistes lietotnes, kas ir gan estētiski pievilcīgas, gan atsaucīgas.