Како користити ЈаваСцрипт-ово платно за додавање прилагођене ивице маскираној слици

Савладавање маскираних ивица слика у ЈаваСцрипт платну

Фузија више слика је уобичајен корак у стварању ЈаваСцрипт визуелних ефеката. Дефинисање видљивих области слике помоћу маске је честа техника. Иако је ово корисно за креирање јединствених форми, може бити изазовно додати ивицу око тих маскираних облика. Иако је елемент у ЈаваСцрипт-у нуди опсежну манипулацију сликама, није лако подесити ивицу око слике која је маскирана.

Програмери могу да примењују маске и исецају слике на маштовите начине помоћу , иако подразумевано, свака генерисана ивица тежи да одговара правоугаоном облику платна. Када желите да направите ивицу која одговара ивицама компликованог облика који је дефинисан маском, ово представља проблем. Циљ је пратити прецизно путовање маске изван правоугаоне границе.

Овај пост ће објаснити како да примените маску слике у ЈаваСцрипт-у и, што је још важније, како да се уверите да је посебан облик маскиране слике окружен ивицом. Поред тога, прећи ћемо преко функције која завршава маскирање, али још увек нема дефинисано решење границе.

Можете фино да подесите изглед ивице тако што ћете научити како да радите са сложеним операцијама на платну. Хајде да почнемо и да видимо како да користимо ЈаваСцрипт функције платна да бисмо додали потребну ивицу око маскиране слике.

Цомманд	Пример употребе
globalCompositeOperation	Композиција радњи цртања на платну је дефинисана овом особином. ГлобалЦомпоситеОператион ='соурце-ин' у примеру осигурава да слика маске исече главну слику тако да се виде само области које се укрштају.
toDataURL()	Трансформише информације о платну у слику кодирану са Басе64. Ово омогућава да се готова слика користи као ПНГ након примене маске и ивице. Излаз слике примера се производи помоћу цанвас.тоДатаУРЛ('имаге/пнг').
crossOrigin	Ова функција поштује безбедносна ограничења тако што омогућава коришћење слика учитаних са другог домена на платну. МаскИмг.цроссОригин = 'анонимно' гарантује да се приступ слици маске може извршити без изазивања ЦОРС проблема.
beginPath()	На платну се овим методом може покренути нова путања. Други метод позива цтк.бегинПатх() како би осигурао да се путања придржава контуре маске док црта прилагођену ивицу око маскиране слике.
moveTo()	Овим поступком се не праве цртежи; уместо тога, "оловка" се помера на ново почетно место. Почетна тачка ивице је позиционирана у примеру помоћу цтк.мовеТо(0, 0), што је од суштинског значаја за прецизно цртање границе око граница маске.
lineTo()	Користећи дате координате као полазну тачку, ова техника црта праву линију. Граница маскиране слике је дефинисана линијама нацртаним у решењу помоћу цтк.линеТо(маскИмг.видтх, 0).
stroke()	Дуж означене путање, црта границе или линије. На пример, мовеТо() и линеТо() се користе за дефинисање форме маске, а затим се цтк.строке() користи за примену ивице око маскиране слике.
lineWidth	Одређује колико су дебеле линије насликане на платну. Скрипта успоставља ивицу дебљине 5 пиксела око облика маске користећи цтк.линеВидтх = 5.
strokeStyle	Означава боју или стил ивице. Боја ивице у примеру је постављена на црвену коришћењем цтк.строкеСтиле ='ред'.

Препознавање како да примените ивицу на маскирану слику

Циљ скрипти које су обезбеђене је да користе другу слику као маску за једну слику, а затим користе да додате прилагођену ивицу око маскираног облика. Два нова објекта слике се креирају на почетку функције за маску и главну слику. Приликом учитавања фотографија са спољних извора, подешавање унакрсног порекла је од суштинског значаја за спречавање проблема због ЦОРС-а. Формира се платно и његове пропорције се прилагођавају тако да одговарају слици маске када се обе слике учитају. Ово избегава проблеме са променом величине током цртања слике и гарантује да је платно припремљено за рад са одговарајућом површином.

Скрипта затим користи функција за цртање слике маске на платну. При томе се маска наноси на платно, служећи као темељни слој за поступак маскирања. Глобална композитна операција мора бити подешена на „изворни улаз“ да би се маска правилно применила. Платно је наложено да задржи само области примарне слике које се поклапају са сликом маске. У суштини, маска дефинише облик на који је главна слика исечена. Композитна операција се ресетује на „преко извора“ када се главна слика нацрта унутар ове области за одсецање, омогућавајући додатне радње као што је сликање ивица без утицаја на претходно исечени садржај.

Примена ивице на маскирани облик подразумева коришћење техника. Наведена путања или образац на платну је назначен овом командом. У другом решењу, мовеТо() и линеТо() се комбинују да би се ручно генерисала путања платна и пратиле границе маске. Користећи ове технике, можете ручно одредити облик ивице и осигурати да се придржава облика маске, а не правоугаоне границе платна. Имате потпуну контролу над изгледом границе јер својство поставља дебљину границе и својство поставља своју боју.

На крају, функција тоДатаУРЛ() се користи за трансформацију платна у Басе64 стринг. На тај начин се готова слика — укључена маска и ивица — трансформише у формат који се лако користи у другим областима програма или се отпрема на сервер. Да би се избегле грешке у времену, обећање обезбеђује да се ова операција заврши само када се обе слике потпуно учитају. Ове скрипте показују како се софистициране технике модификације слике, укључујући маскирање и примену динамичке ивице која се прецизно поклапа са контурама маске, могу постићи помоћу ЈаваСцрипт елемента платна.

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

Побољшање маскираних слика са прилагођеним ивицама у ЈаваСцрипт-у

Корисничко искуство ваше ЈаваСцрипт апликације може бити знатно побољшано могућношћу маскирања слика и постављања прилагођених граница када радите са . Уз помоћ маскирања, можете одлучити које области слике су видљиве у зависности од друге слике, познате као маска. Додавање границе око маскиране зоне је проблем са којим се сусрећу многи програмери, посебно када маска није правог правоугаоног облика. Пројекти са ивицама које прецизно одговарају обрисима маске ће изгледати углађеније и стручније.

Корисно решење за овај проблем је коришћење Цанвас АПИ-ја објекат. Можете да користите Патх2Д да дизајнирате сложене руте које одговарају контурама ваше маске, а затим их окружите ивицом. Овај метод вам омогућава да генеришете ивице које се прецизно поклапају са угловима ваше прилагођене маске, превазилазећи конвенционалне правоугаонике. Коришћење и заједно олакшава праћење обриса маске и гарантује да је граница прецизно поравната.

Перформансе су још један важан фактор који треба узети у обзир, посебно када радите са већим сликама или динамички примењујете ивице у реалном времену. Брзина ваше апликације може се побољшати употребом стратегија као што су кеширање маскиране слике, смањење операција цртања и поједностављење процеса приказивања на платну. Чак и у сложеним поставкама или поставкама високих перформанси, можете гарантовати да ће процедуре маскирања и цртања ивица проћи глатко смањењем бесмислених радњи.

1. У ЈаваСцрипт-у, како могу да користим другу слику да маскирам једну?
2. Коришћење постављен на , нацртајте маску на платну да бисте маскирали слику користећи . Да би се поклопила маска, ово ће изрезати примарну слику.
3. Како могу да направим ивицу за маскирану слику која је у складу са њеним обликом?
4. Након успостављања руте маске са и , користите техника. Ово ће вам омогућити да заокружите облик маске персонализованом ивицом.
5. Шта је сврха у манипулацији платном?
6. Садржај платна се трансформише у Басе64 кодирану слику преко функцију, што олакшава употребу или дистрибуцију као ПНГ слике.
7. Како могу да оптимизујем операције платна за перформансе?
8. Смањите количину операција цртања и размислите о складиштењу често коришћених елемената да бисте максимизирали брзину платна. Ово одржава вашу апликацију да функционише глатко и смањује број поновних цртања.
9. Могу ли да учитам слике са више порекла на платну?
10. Да, али да би слика била доступна без изазивања потешкоћа са ЦОРС-ом, потребно је да подесите власништво да .

У ЈаваСцрипт апликацијама, маскирање слика и примена прилагођених ивица на платну је ефикасан начин за креирање углађених визуелних елемената. Програмери имају могућност да манипулишу приказивањем и стилизовањем слика користећи и софистициране команде за цртање као нпр и дефиниције пута.

Глатке перформансе су обезбеђене пажљивом оптимизацијом ивица и операцијама маскирања, посебно за веће фотографије. Овај водич пружа користан метод за динамичко сликање граница око неправоугаоних слика, што је корисно када се развијају онлајн апликације које су и естетски угодне и реаговане.