Hoe u het canvas van JavaScript gebruikt om een ​​aangepaste rand aan een gemaskerde afbeelding toe te voegen

Beheersing van gemaskeerde afbeeldingsranden in JavaScript Canvas

Het samenvoegen van meerdere afbeeldingen is een veel voorkomende stap bij het maken van visuele effecten in JavaScript. Het definiëren van de zichtbare delen van een afbeelding met een masker is een veel voorkomende techniek. Hoewel dit handig is bij het maken van unieke vormen, kan het een uitdaging zijn om een ​​rand rond die gemaskerde vormen toe te voegen. Hoewel de canvas element in JavaScript biedt uitgebreide beeldmanipulatie, het is niet eenvoudig om de rand rond een gemaskeerde afbeelding aan te passen.

Ontwikkelaars kunnen op fantasierijke manieren maskers toepassen en afbeeldingen knippen met de Canvas-API, hoewel elke gegenereerde rand standaard overeenkomt met de rechthoekige vorm van het canvas. Wanneer u een rand wilt maken die overeenkomt met de randen van een ingewikkelde vorm die wordt gedefinieerd door een masker, levert dit een probleem op. Het doel is om de precieze reis van het masker voorbij de eenvoudige rechthoekige rand te volgen.

In dit bericht wordt uitgelegd hoe je een afbeeldingsmasker in JavaScript toepast en, nog belangrijker, hoe je ervoor kunt zorgen dat de aparte vorm van de gemaskeerde afbeelding wordt omgeven door een rand. Daarnaast zullen we een functie bespreken die de maskering voltooit, maar nog geen gedefinieerde randoplossing heeft.

U kunt het uiterlijk van de rand verfijnen door te leren werken met samengestelde bewerkingen in canvas. Laten we aan de slag gaan en kijken hoe we de canvasfuncties van JavaScript kunnen gebruiken om de noodzakelijke rand rond een gemaskerde afbeelding toe te voegen.

Herkennen hoe u een rand op een gemaskeerde afbeelding kunt toepassen

Het doel van de meegeleverde scripts is om een ​​andere afbeelding als masker voor één afbeelding te gebruiken en vervolgens de Canvas-API om een ​​aangepaste rand rond de gemaskerde vorm toe te voegen. Aan het begin van de functie worden voor het masker en de hoofdafbeelding twee nieuwe afbeeldingsobjecten gemaakt. Bij het laden van foto's uit externe bronnen is de cross-origin instelling essentieel om problemen als gevolg van CORS te voorkomen. Er wordt een canvas gevormd en de verhoudingen ervan worden aangepast zodat ze overeenkomen met de maskerafbeelding zodra beide afbeeldingen zijn geladen. Dit voorkomt problemen met het wijzigen van de grootte tijdens het tekenen van afbeeldingen en garandeert dat het canvas met het juiste gebied is voorbereid voor gebruik.

Het script gebruikt vervolgens de tekenAfbeelding() functie om de maskerafbeelding op het canvas te tekenen. Daarbij wordt het masker op het canvas aangebracht en dient als basislaag voor de maskeerprocedure. De globale samengestelde bewerking moet worden ingesteld op "source-in" om het masker correct toe te passen. Het canvas krijgt de opdracht alleen de gebieden van de primaire afbeelding te behouden die samenvallen met de maskerafbeelding. In wezen definieert het masker de vorm waarnaar de hoofdafbeelding wordt geknipt. De samengestelde bewerking wordt opnieuw ingesteld op "source-over" wanneer de hoofdafbeelding binnen dit uitknipgebied wordt getekend, waardoor extra acties mogelijk zijn, zoals het schilderen van randen, zonder de eerder geknipte inhoud te beïnvloeden.

Als u een rand op de gemaskerde vorm wilt toepassen, gebruikt u de hartinfarct() techniek. Met deze opdracht wordt het opgegeven pad of formulier op het canvas aangegeven. In de tweede oplossing worden moveTo() en lineTo() gecombineerd om handmatig het canvaspad te genereren en de randen van het masker te volgen. Met behulp van deze technieken kunt u de vorm van de rand handmatig opgeven en ervoor zorgen dat deze de vorm van het masker volgt en niet de rechthoekige canvasrand. U heeft volledige controle over het uiterlijk van de rand, omdat de lijnbreedte eigenschap stelt de dikte van de rand in en de slagstijl eigenschap bepaalt zijn kleur.

Ten slotte wordt de functie toDataURL() gebruikt om het canvas om te zetten in een Base64-string. Door dit te doen, wordt de voltooide afbeelding (inclusief masker en rand) omgezet in een formaat dat gemakkelijk in andere delen van het programma kan worden gebruikt of naar een server kan worden geüpload. Om timingfouten te voorkomen, zorgt de belofte ervoor dat deze operatie pas eindigt als beide foto's volledig zijn geladen. Deze scripts laten zien hoe geavanceerde technieken voor het wijzigen van afbeeldingen, waaronder maskeren en het toepassen van een dynamische rand die precies overeenkomt met de contouren van het masker, kunnen worden bereikt met het canvas-element van 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;
    });
}

Gemaskeerde afbeeldingen verbeteren met aangepaste randen in JavaScript

De gebruikerservaring van uw JavaScript-applicatie kan aanzienlijk worden verbeterd door de mogelijkheid om afbeeldingen te maskeren en aangepaste randen in te stellen bij het omgaan met de Canvas-API. Met behulp van maskeren kunt u bepalen welke delen van een afbeelding zichtbaar zijn, afhankelijk van een andere afbeelding, ook wel het masker genoemd. Het toevoegen van een rand rond de gemaskeerde zone is een probleem waar veel ontwikkelaars mee te maken krijgen, vooral als het masker geen eenvoudige rechthoekige vorm heeft. Projecten met randen die precies overeenkomen met de omtrek van het masker zullen er verzorgder en professioneler uitzien.

Een handige oplossing voor dit probleem is het gebruik van de Canvas API Pad2D voorwerp. U kunt Path2D gebruiken om ingewikkelde routes te ontwerpen die passen bij de contouren van uw masker en deze vervolgens omringen met een rand. Met deze methode kunt u randen genereren die precies overeenkomen met de hoeken van uw aangepaste masker, en verder gaan dan conventionele rechthoeken. Gebruiken moveTo() En lineTo() samen maakt het gemakkelijker om de omtrek van het masker te volgen en garandeert een rand die precies is uitgelijnd.

Prestaties zijn een andere belangrijke factor waarmee u rekening moet houden, vooral wanneer u met grotere afbeeldingen werkt of randen dynamisch in realtime toepast. De snelheid van uw toepassing kan worden verbeterd door strategieën te gebruiken zoals het in de cache opslaan van de gemaskeerde afbeelding, het verminderen van tekenbewerkingen en het stroomlijnen van het canvasweergaveproces. Zelfs in ingewikkelde of hoogwaardige omgevingen kunt u garanderen dat de procedures voor het maskeren en het tekenen van randen soepel verlopen door zinloze handelingen te verminderen.