Como usar o Canvas do JavaScript para adicionar uma borda personalizada a uma imagem mascarada

Dominando bordas de imagens mascaradas em JavaScript Canvas

A fusão de múltiplas imagens é uma etapa comum na criação de efeitos visuais em JavaScript. Definir as áreas visíveis de uma imagem com uma máscara é uma técnica frequente. Embora isso seja útil para criar formas exclusivas, pode ser um desafio adicionar uma borda ao redor dessas formas mascaradas. Embora o tela elemento em JavaScript oferece ampla manipulação de imagens, não é fácil ajustar a borda ao redor de uma imagem que foi mascarada.

Os desenvolvedores podem aplicar máscaras e recortar imagens de maneira criativa com o API de tela, embora, por padrão, qualquer borda gerada tenda a corresponder ao formato retangular da tela. Quando você deseja criar uma borda que corresponda às bordas de uma forma complicada definida por uma máscara, isso representa um problema. O objetivo é seguir o percurso preciso da máscara além da borda retangular simples.

Esta postagem explicará como aplicar uma máscara de imagem em JavaScript e, mais importante, como garantir que a forma distinta da imagem mascarada esteja cercada por uma borda. Além disso, abordaremos uma função que completa o mascaramento, mas ainda não possui uma solução de borda definida.

Você pode ajustar a aparência da borda aprendendo como trabalhar com operações compostas no canvas. Vamos começar e ver como usar os recursos de tela do JavaScript para adicionar a borda necessária ao redor de uma imagem mascarada.

Reconhecendo como aplicar uma borda a uma imagem mascarada

O objetivo dos scripts fornecidos é usar outra imagem como máscara para uma imagem e, em seguida, usar o API de tela para adicionar uma borda personalizada ao redor da forma mascarada. Dois novos objetos de imagem são criados no início da função para a máscara e a imagem principal. Ao carregar fotos de fontes externas, a configuração de origem cruzada é essencial para evitar problemas devido ao CORS. Uma tela é formada e suas proporções são ajustadas para corresponder à imagem da máscara assim que ambas as imagens forem carregadas. Isso evita problemas de redimensionamento durante o desenho da imagem e garante que a tela esteja preparada para trabalhar com a área adequada.

O script então usa o desenharImagem() função para desenhar a imagem da máscara na tela. Ao fazer isso, a máscara é aplicada na tela, servindo como camada de base para o procedimento de mascaramento. A operação de composição global deve ser definida como "source-in" para aplicar a máscara corretamente. A tela é instruída a reter apenas as áreas da imagem primária que coincidem com a imagem da máscara. Em essência, a máscara define a forma na qual a imagem principal é recortada. A operação de composição é redefinida para "source-over" quando a imagem principal é desenhada dentro desta área de recorte, permitindo ações adicionais como pintura de bordas sem impactar o conteúdo previamente recortado.

Aplicar uma borda à forma mascarada envolve usar o AVC() técnica. O caminho ou formulário especificado na tela é indicado por este comando. Na segunda solução, moveTo() e lineTo() são combinados para gerar manualmente o caminho da tela e traçar as bordas da máscara. Com o uso dessas técnicas, você pode especificar manualmente o formato da borda e garantir que ela esteja de acordo com o formato da máscara, e não com o limite retangular da tela. Você tem controle total sobre a aparência da fronteira porque o largura da linha propriedade define a espessura da borda e o estiloAVC propriedade define sua cor.

Por último, a função toDataURL() é usada para transformar o canvas em uma string Base64. Ao fazer isso, a imagem finalizada – máscara e borda incluídas – é transformada em um formato que pode ser facilmente utilizado em outras áreas do programa ou carregado em um servidor. Para evitar erros de tempo, a promessa garante que esta operação só termine quando ambas as imagens estiverem totalmente carregadas. Esses scripts mostram como técnicas sofisticadas de modificação de imagem, incluindo mascaramento e aplicação de uma borda dinâmica que corresponda precisamente aos contornos da máscara, podem ser realizadas com o elemento canvas do 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;
    });
}

Aprimorando imagens mascaradas com bordas personalizadas em JavaScript

A experiência do usuário do seu aplicativo JavaScript pode ser bastante aprimorada pela capacidade de mascarar imagens e definir bordas personalizadas ao lidar com o API de tela. Com a ajuda do mascaramento, você pode decidir quais áreas de uma imagem serão visíveis dependendo de outra imagem, conhecida como máscara. Adicionar uma borda ao redor da zona mascarada é um problema que muitos desenvolvedores encontram, especialmente quando a máscara não tem um formato retangular simples. Projetos com bordas que correspondam exatamente ao contorno da máscara parecerão mais sofisticados e sofisticados.

Uma solução útil para este problema é usar a API Canvas Caminho2D objeto. Você pode usar o Path2D para projetar rotas complexas que se ajustem aos contornos da sua máscara e depois cercá-las com uma borda. Este método permite gerar bordas que correspondem precisamente aos cantos da sua máscara personalizada, indo além dos retângulos convencionais. Usando moveTo() e lineTo() juntos facilitam o traçado do contorno da máscara e garantem um alinhamento preciso da borda.

O desempenho é outro fator importante a ser levado em consideração, principalmente ao trabalhar com imagens maiores ou ao aplicar bordas dinamicamente em tempo real. A velocidade do seu aplicativo pode ser melhorada empregando estratégias como armazenar em cache a imagem mascarada, reduzir as operações de desenho e simplificar o processo de renderização da tela. Mesmo em configurações complexas ou de alto desempenho, você pode garantir que os procedimentos de mascaramento e desenho de bordas ocorram sem problemas, reduzindo ações inúteis.