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 kangas 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 Canvas API, 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.

Reunuksen lisääminen naamioituun kuvaan

Toimitettujen komentosarjojen tavoitteena on käyttää toista kuvaa yhden kuvan peitteenä ja käyttää sitten komentosarjaa Canvas API 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 piirräkuva() 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ää veto () 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 lineWidth ominaisuus määrittää reunan paksuuden ja vetotyyli 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ä Canvas API. 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ää Polku2D 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ä moveTo() ja lineTo() 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.