Com utilitzar el llenç de JavaScript per afegir una vora personalitzada a una imatge emmascarada

Dominar les vores d'imatges emmascarades al llenç de JavaScript

La fusió d'imatges múltiples és un pas comú en la creació d'efectes visuals de JavaScript. Definir les àrees visibles d'una imatge amb una màscara és una tècnica freqüent. Tot i que això és útil per crear formes úniques, pot ser difícil afegir una vora al voltant d'aquestes formes emmascarades. Encara que el element en JavaScript ofereix una manipulació extensa d'imatges, no és fàcil ajustar la vora al voltant d'una imatge que s'ha emmascarat.

Els desenvolupadors poden aplicar màscares i retallar imatges de maneres imaginatives amb el , encara que per defecte, qualsevol vora generada tendeix a coincidir amb la forma rectangular del llenç. Quan voleu crear una vora que coincideixi amb les vores d'una forma complicada que està definida per una màscara, això presenta un problema. L'objectiu és seguir el recorregut precís de la màscara més enllà de la vora rectangular.

Aquesta publicació explicarà com aplicar una màscara d'imatge a JavaScript i, més important, com assegurar-se que la forma diferent de la imatge emmascarada estigui envoltada per una vora. A més, repassarem una funció que completa l'emmascarament però encara no té una solució de vora definida.

Podeu afinar l'aspecte de la vora aprenent a treballar amb operacions compostes al llenç. Comencem i veiem com utilitzar les funcions del llenç de JavaScript per afegir la vora necessària al voltant d'una imatge emmascarada.

Comandament	Exemple d'ús
globalCompositeOperation	Aquesta característica defineix la composició de les accions de dibuix al llenç. El globalCompositeOperation ='source-in' de l'exemple assegura que la imatge de la màscara retalla la imatge principal de manera que només es vegin les àrees que es tallen.
toDataURL()	Transforma la informació del llenç en una imatge codificada amb Base64. Això fa possible utilitzar la imatge acabada com a PNG després d'aplicar la màscara i la vora. La sortida de la imatge de l'exemple es produeix mitjançant canvas.toDataURL('image/png').
crossOrigin	Aquesta funció respecta les restriccions de seguretat, ja que permet l'ús d'imatges carregades des d'un domini diferent al llenç. MaskImg.crossOrigin = 'anònim' garanteix que l'accés a la imatge de la màscara es pot fer sense causar problemes de CORS.
beginPath()	Al llenç, es pot iniciar un camí nou amb aquest mètode. El segon mètode crida a ctx.beginPath() per assegurar-se que el camí s'adhereix al contorn de la màscara mentre dibuixa una vora personalitzada al voltant de la imatge emmascarada.
moveTo()	Amb aquest procediment no es fan dibuixos; en canvi, el "bolígraf" es mou a un nou lloc inicial. El punt inicial de la vora es col·loca a l'exemple mitjançant ctx.moveTo(0, 0), que és essencial per dibuixar la vora amb precisió al voltant dels límits de la màscara.
lineTo()	Utilitzant les coordenades donades com a punt de partida, aquesta tècnica dibuixa una línia recta. La vora de la imatge emmascarada es defineix per les línies dibuixades a la solució utilitzant ctx.lineTo(maskImg.width, 0).
stroke()	Al llarg del camí designat, dibuixa les vores o línies. Per exemple, moveTo() i lineTo() s'utilitzen per definir la forma de la màscara, i després ctx.stroke() s'utilitza per aplicar la vora al voltant de la imatge emmascarada.
lineWidth	Determina el gruix de les línies pintades al llenç. L'script estableix una vora de 5 píxels de gruix al voltant de la forma de la màscara mitjançant ctx.lineWidth = 5.
strokeStyle	Indica el color o l'estil de la vora. El color de la vora de l'exemple s'estableix en vermell mitjançant ctx.strokeStyle ='vermell'.

Reconeixement de com aplicar una vora a una imatge emmascarada

L'objectiu dels scripts que es proporcionen és utilitzar una altra imatge com a màscara per a una imatge i després utilitzar el per afegir una vora personalitzada al voltant de la forma emmascarada. Es creen dos nous objectes d'imatge a l'inici de la funció per a la màscara i la imatge principal. Quan es carreguen fotos de fonts externes, la configuració d'origen creuat és essencial per evitar problemes deguts a CORS. Es forma un llenç i les seves proporcions s'ajusten perquè coincideixin amb la imatge de la màscara un cop s'han carregat ambdues imatges. Això evita problemes de redimensionament durant el dibuix de la imatge i garanteix que el llenç estigui preparat per treballar amb l'àrea adequada.

Aleshores, el guió utilitza el funció per dibuixar la imatge de la màscara al llenç. En fer-ho, la màscara s'aplica a la tela, que serveix com a capa de base per al procediment d'emmascarament. L'operació composta global s'ha d'establir a "source-in" per tal d'aplicar la màscara correctament. S'indica al llenç que conservi només les àrees de la imatge principal que coincideixen amb la imatge de la màscara. En essència, la màscara defineix la forma a la qual es retalla la imatge principal. L'operació composta es restableix a "font-over" quan la imatge principal es dibuixa dins d'aquesta àrea de retall, permetent accions addicionals com pintar vores sense afectar el contingut retallat anteriorment.

Aplicar una vora a la forma emmascarada implica utilitzar el tècnica. El camí o el formulari especificat al llenç s'indica amb aquesta ordre. A la segona solució, moveTo() i lineTo() es combinen per generar manualment el camí del llenç i traçar les vores de la màscara. Amb l'ús d'aquestes tècniques, podeu especificar manualment la forma de la vora i assegurar-vos que s'adhereix a la forma de la màscara en lloc del límit rectangular del llenç. Tens un control total sobre l'aspecte de la frontera perquè La propietat estableix el gruix de la vora i el propietat estableix el seu color.

Finalment, la funció toDataURL() s'utilitza per transformar el llenç en una cadena Base64. En fer-ho, la imatge acabada (inclosos màscara i vorera) es transforma en un format que s'utilitza fàcilment en altres àrees del programa o es carrega a un servidor. Per evitar errors de cronometratge, la promesa assegura que aquesta operació només acabi quan les dues imatges s'hagin carregat completament. Aquests scripts mostren com es poden aconseguir tècniques sofisticades de modificació d'imatges, com ara l'emmascarament i l'aplicació d'una vora dinàmica que coincideixi precisament amb els contorns de la màscara, amb l'element llenç de 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';
                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;
    });
}

Millora de les imatges emmascarades amb vores personalitzades a JavaScript

L'experiència de l'usuari de la vostra aplicació JavaScript es pot millorar molt gràcies a la capacitat d'emmascarar imatges i establir vores personalitzades quan es tracta de . Amb l'ajuda de l'emmascarament, podeu decidir quines àrees d'una imatge són visibles en funció d'una altra imatge, coneguda com a màscara. Afegir una vora al voltant de la zona emmascarada és un problema amb el qual es troben molts desenvolupadors, sobretot quan la màscara no té una forma rectangular senzilla. Els projectes amb vores que coincideixen precisament amb el contorn de la màscara apareixeran més polits i experts.

Una solució útil a aquest problema és utilitzar l'API Canvas objecte. Podeu utilitzar Path2D per dissenyar rutes intricades que s'ajustin als contorns de la vostra màscara i després envoltar-les amb una vora. Aquest mètode us permet generar vores que coincideixen precisament amb les cantonades de la vostra màscara personalitzada, anant més enllà dels rectangles convencionals. Utilitzant i conjuntament fa més fàcil traçar el contorn de la màscara i garanteix una vora alineada amb precisió.

El rendiment és un altre factor important a tenir en compte, sobretot quan es treballa amb imatges més grans o s'apliquen vores de manera dinàmica en temps real. La velocitat de la vostra aplicació es pot millorar utilitzant estratègies com la memòria cau de la imatge emmascarada, la reducció de les operacions de dibuix i la racionalització del procés de representació del llenç. Fins i tot en entorns complexos o d'alt rendiment, podeu garantir que els procediments d'emmascarament i dibuix de vores funcionin sense problemes reduint accions inútils.

1. A JavaScript, com puc utilitzar una altra imatge per emmascarar-ne una?
2. Utilitzant establert a , dibuixeu la màscara al llenç per emmascarar una imatge utilitzant el . Per tal de fer coincidir la màscara, retallarà la imatge principal.
3. Com puc crear una vora per a una imatge emmascarada que s'ajusti a la seva forma?
4. Després d'establir el recorregut de la mascareta amb i , utilitza el tècnica. Això us permetrà encerclar la forma de la màscara amb una vora personalitzada.
5. Quin és el propòsit en la manipulació del llenç?
6. El contingut del llenç es transforma en una imatge codificada en Base64 mitjançant el funció, que facilita l'ús o la distribució com a imatge PNG.
7. Com puc optimitzar les operacions del llenç per al rendiment?
8. Reduïu la quantitat d'operacions de dibuix i penseu a emmagatzemar els elements d'ús habitual per maximitzar la velocitat del llenç. Això manté la vostra aplicació funcionant sense problemes i redueix el nombre de redibuixos.
9. Puc carregar imatges d'origen creuat en un llenç?
10. Sí, però per fer que la imatge estigui disponible sense causar problemes CORS, cal que configureu el propietat a .

A les aplicacions de JavaScript, emmascarar imatges i aplicar vores personalitzades al llenç és una manera eficaç de crear elements visuals polits. Els desenvolupadors tenen la capacitat de manipular la representació i l'estil de les imatges utilitzant el i ordres de dibuix sofisticades com ara i definicions de camins.

El rendiment suau es garanteix optimitzant acuradament les operacions de vora i emmascarament, especialment per a fotos més grans. Aquest tutorial proporciona un mètode útil per pintar de forma dinàmica les vores al voltant d'imatges no rectangulars, que és útil quan es desenvolupen aplicacions en línia que siguin estèticament agradables i sensibles.