Kuinka käyttää JavaScriptin kangasta mukautetun reunuksen lisäämiseen peitettyyn kuvaan

Maskattujen kuvien reunusten hallitseminen JavaScript-kankaalla

Useiden kuvien yhdistäminen on yleinen vaihe JavaScript-visuaalisten tehosteiden luomisessa. Kuvan näkyvien alueiden määrittäminen maskilla on yleinen tekniikka. Vaikka tämä on hyödyllistä luotaessa ainutlaatuisia lomakkeita, voi olla haastavaa lisätä reunus näiden naamioitujen muotojen ympärille. Vaikka JavaScript-elementti tarjoaa laajan kuvankäsittelyn, ei ole helppoa säätää reunusta peitetyn kuvan ympärillä.

Kehittäjät voivat käyttää naamioita ja leikata kuvia mielikuvituksellisella tavalla , vaikka oletusarvoisesti mikä tahansa luotu reunus vastaa yleensä kankaan suorakaiteen muotoista muotoa. Kun haluat luoda reunuksen, joka vastaa maskin määrittämän monimutkaisen muodon reunoja, tämä aiheuttaa ongelman. Tavoitteena on seurata maskin tarkkaa matkaa suorakaiteen muotoisen rajan yli.

Tämä viesti selittää, kuinka kuvamaski käytetään JavaScriptissä ja mikä tärkeintä, kuinka varmistetaan, että peitetyn kuvan erillinen muoto on reunuksen ympäröimä. Lisäksi käymme läpi funktion, joka viimeistelee peittämisen, mutta jolla ei vielä ole määriteltyä reunaratkaisua.

Voit hienosäätää reunuksen ulkoasua oppimalla työskentelemään yhdistelmätoimintojen kanssa kankaalla. Aloitetaan ja katsotaan, kuinka voit käyttää JavaScriptin piirtoalustan ominaisuuksia tarvittavan reunuksen lisäämiseen maskatun kuvan ympärille.

Komento	Esimerkki käytöstä
globalCompositeOperation	Tämä ominaisuus määrittää piirustustoimintojen koostumuksen kankaalle. Esimerkin globalCompositeOperation ='source-in' varmistaa, että maskikuva leikkaa pääkuvan niin, että vain leikkaavat alueet näkyvät.
toDataURL()	Muuntaa kankaan tiedot Base64-koodatuksi kuvaksi. Tämä mahdollistaa valmiin kuvan hyödyntämisen PNG-muodossa maskin ja reunuksen lisäämisen jälkeen. Esimerkin kuvatuloste tuotetaan käyttämällä canvas.toDataURL('image/png') avulla.
crossOrigin	Tämä ominaisuus kunnioittaa suojausrajoituksia sallimalla eri toimialueelta ladattujen kuvien käytön kankaalla. MaskImg.crossOrigin = 'anonyymi' takaa, että maskikuvaan pääsee käsiksi ilman CORS-ongelmia.
beginPath()	Kanvasalla voidaan aloittaa uusi polku tällä menetelmällä. Toinen menetelmä kutsuu ctx.beginPath():ta varmistaakseen, että polku pysyy maskin ääriviivassa, kun se piirtää mukautetun reunuksen maskatun kuvan ympärille.
moveTo()	Tällä menettelyllä ei tehdä piirustuksia; sen sijaan "kynä" siirretään uuteen alkupaikkaan. Reunuksen alkupiste sijoitetaan esimerkissä komennolla ctx.moveTo(0, 0), mikä on välttämätöntä rajan piirtämiseksi tarkasti maskin rajojen ympärille.
lineTo()	Käyttämällä annettuja koordinaatteja aloituspisteenä tämä tekniikka piirtää suoran. Maskoidun kuvan raja määritellään ratkaisussa ctx.lineTo(maskImg.width, 0) avulla piirretyillä viivoilla.
stroke()	Piirtää rajat tai viivat määritettyä polkua pitkin. Esimerkiksi MoveTo() ja lineTo() käytetään määrittämään maskimuoto, ja sitten ctx.stroke() käytetään reunuksen käyttämiseen maskatun kuvan ympärillä.
lineWidth	Määrittää, kuinka paksut viivat maalataan kankaalle. Skripti muodostaa 5 pikselin paksuisen reunuksen maskin muodon ympärille käyttämällä ctx.lineWidth = 5.
strokeStyle	Ilmaisee reunuksen värin tai tyylin. Esimerkin reunan väri asetetaan punaiseksi komennolla ctx.strokeStyle ='punainen'.

Reunuksen lisääminen naamioituun kuvaan

Toimitettujen komentosarjojen tavoitteena on käyttää toista kuvaa yhden kuvan peitteenä ja käyttää sitten komentosarjaa lisätäksesi mukautetun reunuksen maskatun muodon ympärille. Kaksi uutta kuvaobjektia luodaan toiminnon alussa maskia ja pääkuvaa varten. Ladattaessa valokuvia ulkoisista lähteistä, cross-origin-asetus on välttämätön CORS-ongelmien estämiseksi. Kanvas muodostetaan ja sen mittasuhteet säädetään vastaamaan maskikuvaa, kun molemmat kuvat on ladattu. Näin vältytään koon muuttamisesta kuvan piirtämisen aikana ja varmistetaan, että kangas on valmis käytettäväksi sopivalla alueella.

Skripti käyttää sitten toiminto piirtää maskin kuvan kankaalle. Tällöin naamio levitetään kankaalle, joka toimii pohjakerroksena maskaustoimenpiteelle. Yleisen yhdistelmätoiminnon arvoksi on asetettava "lähde sisään", jotta maski voidaan käyttää oikein. Kanvas on ohjeistettu säilyttämään vain ensisijaisen kuvan alueet, jotka ovat samat kuin maskikuva. Pohjimmiltaan maski määrittää muodon, johon pääkuva leikataan. Yhdistelmätoiminto palautetaan "lähde yli" -tilaan, kun pääkuva piirretään tämän leikkausalueen sisään, mikä mahdollistaa lisätoiminnot, kuten reunusten maalauksen, vaikuttamatta aiemmin leikattuihin sisältöihin.

Reunuksen lisääminen naamioituun muotoon sisältää tekniikka. Määritetty polku tai muoto kankaalla osoitetaan tällä komennolla. Toisessa ratkaisussa moveTo() ja lineTo() yhdistetään kanvaspolun luomiseksi manuaalisesti ja maskin reunojen jäljittämiseksi. Näitä tekniikoita käyttämällä voit määrittää reunuksen muodon manuaalisesti ja varmistaa, että se noudattaa maskin muotoa suorakaiteen muotoisen kankaan rajan sijaan. Voit hallita rajan ulkonäköä täysin, koska ominaisuus määrittää reunan paksuuden ja ominaisuus määrittää värinsä.

Lopuksi toDataURL()-funktiota käytetään muuttamaan kangas Base64-merkkijonoksi. Näin valmis kuva – maski ja reunus mukaan lukien – muunnetaan muotoon, jota voidaan helposti hyödyntää muilla ohjelman alueilla tai ladata palvelimelle. Ajoitusvirheiden välttämiseksi lupaus varmistaa, että tämä toimenpide päättyy vasta, kun molemmat kuvat on ladattu täyteen. Nämä skriptit osoittavat, kuinka kehittyneitä kuvanmuokkaustekniikoita, kuten maskausta ja dynaamisen reunuksen käyttämistä, joka vastaa tarkasti maskin ääriviivoja, voidaan suorittaa JavaScriptin canvas-elementillä.

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

Maskattujen kuvien parantaminen mukautetuilla reunuksilla JavaScriptissä

JavaScript-sovelluksesi käyttökokemusta voi parantaa huomattavasti kyky peittää kuvia ja asettaa mukautettuja reunoja käsiteltäessä . Maskin avulla voit päättää, mitkä kuvan alueet ovat näkyvissä riippuen toisesta kuvasta, joka tunnetaan nimellä maski. Reunuksen lisääminen peitetyn alueen ympärille on ongelma, jonka monet kehittäjät kohtaavat, varsinkin kun maski ei ole suorakaiteen muotoinen. Projektit, joiden reunat vastaavat tarkasti maskin ääriviivoja, näyttävät hienostuneemmilta ja asiantuntevammilta.

Hyödyllinen ratkaisu tähän ongelmaan on käyttää Canvas-sovellusliittymää esine. Path2D:n avulla voit suunnitella monimutkaisia ​​reittejä, jotka sopivat maskisi ääriviivoihin, ja ympäröidä ne sitten reunuksella. Tämän menetelmän avulla voit luoda reunuksia, jotka vastaavat tarkasti mukautetun maskisi kulmia, ylittäen perinteiset suorakulmiot. Käyttämällä ja yhdessä helpottaa maskin ääriviivojen jäljittämistä ja takaa tarkasti kohdistetun reunuksen.

Suorituskyky on toinen tärkeä huomioitava tekijä, varsinkin kun työskentelet suurempien kuvien kanssa tai käytät reunuksia dynaamisesti reaaliajassa. Sovelluksesi nopeutta voidaan parantaa käyttämällä strategioita, kuten tallentamalla maskattu kuva välimuistiin, vähentämällä piirustustoimintoja ja virtaviivaistamalla kankaan renderöintiprosessia. Jopa monimutkaisissa tai korkean suorituskyvyn asetuksissa voit taata, että maskaus ja reunojen piirtäminen sujuvat sujuvasti vähentämällä turhia toimintoja.

1. Miten voin peittää yhden JavaScriptin toisella kuvalla?
2. Käyttämällä asetettu , piirrä maski kankaalle peittääksesi kuvan käyttämällä . Tämä rajaa ensisijaisen kuvan, jotta se vastaa maskia.
3. Kuinka voin luoda naamioidulle kuvalle reunuksen, joka mukautuu sen muotoon?
4. Kun olet määrittänyt maskin reitin kanssa ja , käytä tekniikka. Näin voit ympäröidä maskin muodon henkilökohtaisella reunuksella.
5. Mikä on tarkoitus kankaan manipuloinnissa?
6. Kankaan sisältö muunnetaan Base64-koodatuksi kuvaksi toiminto, mikä tekee siitä helpon käyttää tai jakaa PNG-kuvana.
7. Kuinka voin optimoida kanvastoiminnot suorituskyvyn kannalta?
8. Vähennä piirustustoimintojen määrää ja harkitse yleisesti käytettyjen elementtien tallentamista kankaan nopeuden maksimoimiseksi. Tämä pitää sovelluksesi sujuvana ja vähentää uudelleenpiirtämisen määrää.
9. Voinko ladata eri alkuperäkuvia kankaalle?
10. Kyllä, mutta jotta kuva olisi käytettävissä aiheuttamatta CORS-vaikeuksia, sinun on asetettava omaisuutta .

JavaScript-sovelluksissa kuvien peittäminen ja mukautettujen reunusten käyttäminen kankaalle on tehokas tapa luoda kiillotettuja visuaalisia elementtejä. Kehittäjät voivat manipuloida kuvien renderöintiä ja tyyliä käyttämällä ja kehittyneitä piirustuskomentoja, kuten ja polun määritelmät.

Tasainen suorituskyky varmistetaan optimoimalla huolellisesti reuna- ja maskaustoiminnot, erityisesti suurempia kuvia varten. Tämä opetusohjelma tarjoaa hyödyllisen tavan maalata dynaamisesti reunuksia ei-suorakulmaisten kuvien ympärille, mikä on hyödyllistä kehitettäessä verkkosovelluksia, jotka ovat sekä esteettisesti miellyttäviä että reagoivia.