Kaip naudoti „JavaScript“ drobę, norint pridėti tinkintą kraštinę prie užmaskuoto vaizdo

Užmaskuotų vaizdo kraštinių įvaldymas JavaScript drobėje

Kelių paveikslėlių suliejimas yra įprastas „JavaScript“ vaizdinių efektų kūrimo veiksmas. Matomų vaizdo sričių apibrėžimas naudojant kaukę yra dažnas būdas. Nors tai naudinga kuriant unikalias formas, gali būti sudėtinga pridėti kraštinę aplink tas užmaskuotas formas. Nors drobė „JavaScript“ elementas siūlo platų vaizdo manipuliavimą, nėra lengva pakoreguoti kraštinę aplink užmaskuotą vaizdą.

Kūrėjai gali pritaikyti kaukes ir iškirpti nuotraukas išradingai naudodami Canvas API, nors pagal numatytuosius nustatymus bet kokia sugeneruota kraštinė paprastai atitinka stačiakampę drobės formą. Kai norite sukurti kraštinę, atitinkančią sudėtingos formos, apibrėžtos kauke, kraštus, tai iškyla problema. Tikslas yra stebėti tikslią kaukės kelionę už paprastos stačiakampės sienos.

Šiame įraše bus paaiškinta, kaip pritaikyti vaizdo kaukę „JavaScript“ ir, dar svarbiau, kaip užtikrinti, kad atskira užmaskuoto paveikslėlio forma būtų apsupta kraštinės. Be to, apžvelgsime funkciją, kuri užbaigia maskavimą, bet dar neturi apibrėžto krašto sprendimo.

Galite tiksliai sureguliuoti kraštinės išvaizdą, išmokę dirbti su sudėtinėmis operacijomis drobėje. Pradėkime ir pažiūrėkime, kaip naudoti „JavaScript“ drobės funkcijas, kad aplink užmaskuotą vaizdą būtų pridėta reikiama kraštinė.

Atpažinimas, kaip užmaskuotam vaizdui pritaikyti kraštinę

Pateiktų scenarijų tikslas yra naudoti kitą paveikslėlį kaip vieno vaizdo kaukę, o tada naudoti Canvas API kad pridėtumėte tinkintą kraštinę aplink užmaskuotą formą. Funkcijos pradžioje sukuriami du nauji vaizdo objektai, skirti kaukei ir pagrindiniam vaizdui. Įkeliant nuotraukas iš išorinių šaltinių, kryžminės kilmės nustatymas yra būtinas siekiant išvengti problemų dėl CORS. Įkėlus abu vaizdus formuojama drobė ir jos proporcijos sureguliuojamos, kad atitiktų kaukės vaizdą. Taip išvengiama dydžio keitimo problemų piešiant vaizdą ir garantuojama, kad drobė bus paruošta darbui su atitinkamu plotu.

Tada scenarijus naudoja piešti paveikslėlį () funkcija piešti kaukės vaizdą ant drobės. Tai darant, kaukė uždedama ant drobės, kuri yra pagrindas maskavimo procedūrai. Norint tinkamai pritaikyti kaukę, visuotinė sudėtinė operacija turi būti nustatyta į „source-in“. Drobėje nurodyta išlaikyti tik tas pirminio paveikslėlio sritis, kurios sutampa su kaukės vaizdu. Iš esmės kaukė apibrėžia formą, prie kurios nukirptas pagrindinis vaizdas. Sudėtinė operacija iš naujo nustatoma į „šaltinio viršų“, kai pagrindinė nuotrauka nupiešta šioje iškirpimo srityje, todėl galima atlikti papildomus veiksmus, pvz., piešti kraštines, nepažeidžiant anksčiau nukirpto turinio.

Užmaskuotai formai uždėjus kraštinę, reikia naudoti insultas () technika. Nurodytas kelias arba forma drobėje nurodoma šia komanda. Antrajame sprendime „moveTo“ () ir „lineTo“ () derinami, kad būtų galima rankiniu būdu generuoti drobės kelią ir atsekti kaukės ribas. Naudodami šiuos metodus galite rankiniu būdu nurodyti kraštinės formą ir įsitikinti, kad ji laikosi kaukės formos, o ne stačiakampio drobės ribos. Jūs visiškai kontroliuojate sienos išvaizdą, nes linijos plotis savybė nustato kraštinės storį ir insultoStilius nuosavybė nustato jo spalvą.

Galiausiai funkcija toDataURL() naudojama drobei transformuoti į Base64 eilutę. Tai padarius, gatavas vaizdas (įskaitant kaukę ir kraštinę) paverčiamas formatu, kuris yra lengvai naudojamas kitose programos srityse arba įkeliamas į serverį. Siekiant išvengti laiko klaidų, pažadas užtikrina, kad ši operacija baigtųsi tik tada, kai abi nuotraukos bus visiškai įkeltos. Šie scenarijai parodo, kaip naudojant „JavaScript“ drobės elementą galima atlikti sudėtingus vaizdo modifikavimo metodus, įskaitant maskavimą ir dinaminės kraštinės, tiksliai atitinkančios kaukės kontūrus, pritaikymą.

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

Užmaskuotų vaizdų tobulinimas tinkintomis kraštinėmis „JavaScript“.

„JavaScript“ programos naudotojo patirtį gali labai pagerinti galimybė užmaskuoti vaizdus ir nustatyti pasirinktines kraštines dirbant su Canvas API. Naudodami maskavimą galite nuspręsti, kurios vaizdo sritys yra matomos, atsižvelgiant į kitą vaizdą, vadinamą kauke. Kraštinės pridėjimas aplink užmaskuotą zoną yra problema, su kuria susiduria daugelis kūrėjų, ypač kai kaukė nėra paprastos stačiakampio formos. Projektai su krašteliais, kurie tiksliai atitinka kaukės kontūrą, atrodys labiau patobulinti ir ekspertiški.

Naudingas šios problemos sprendimas yra naudoti Canvas API Path2D objektas. Galite naudoti „Path2D“, kad sukurtumėte sudėtingus maršrutus, atitinkančius jūsų kaukės kontūrus, ir apjuosite juos krašteliu. Šis metodas leidžia sugeneruoti kraštines, kurios tiksliai atitinka pasirinktinės kaukės kampus, o ne įprastus stačiakampius. Naudojant moveTo() ir lineTo() kartu leidžia lengviau atsekti kaukės kontūrus ir garantuoja tiksliai išlygintą kraštą.

Našumas yra dar vienas svarbus veiksnys, į kurį reikia atsižvelgti, ypač dirbant su didesniais vaizdais arba dinamiškai taikant rėmelius realiuoju laiku. Programos greitį galima padidinti naudojant tokias strategijas kaip užmaskuoto paveikslėlio išsaugojimas talpykloje, piešimo operacijų sumažinimas ir drobės atvaizdavimo proceso supaprastinimas. Net esant sudėtingiems ar didelio našumo parametrams, galite garantuoti, kad maskavimo ir kraštinių piešimo procedūros vyks sklandžiai, sumažindami beprasmių veiksmų skaičių.