• Edge Application
• Image Processor

O Image Processor é um módulo do Edge Application que pode manipular e processar imagens diretamente no edge, otimizando os tempos de transferência de conteúdo e elevando a experiência do usuário em suas aplicações.

Começando com uma imagem original da sua biblioteca, o Image Processor pode criar imagens derivadas sob demanda, permitindo que você:

• Redimensione imagens para atender às suas necessidades.
• Corte imagens com precisão.
• Otimize os tempos de processamento mantendo a qualidade das imagens.
• Converta formatos de imagem no edge.
• Aplique filtros ou adicione marcas d’água para aprimorar a imagem.

Esse módulo oferece suporte aos seguintes formatos de imagem:

• JPEG
• GIF
• PNG
• BMP
• ICO
• WEBP (para navegadores compatíveis)

Você especifica as dimensões desejadas como argumentos na query da URL no formato ims=WidthxHeight. Os parâmetros Width e Height devem ser alterados para a largura e altura da imagem, respectivamente, em pixels.

O arquivo /image.jpg?ims=WidthxHeight a seguir seria redimensionado de acordo com os parâmetros Width e Height definidos:

Ao especificar Width e Height, a imagem pode ser cortada automaticamente para se ajustar ao tamanho necessário. O corte é centralizado e pode ser vertical ou horizontal, dependendo da adequação das dimensões originais às dimensões especificadas.

Ao adicionar a query ?ims=400x400 à URL da imagem, ela será redimensionada para 400 por 400 pixels com corte automático. Por exemplo:

A proporção pode ser preservada mantendo-se apenas um dos dois parâmetros na query da URL. Você pode preservar a largura usando Widthx para calcular a altura correspondente, ou xHeight para especificar apenas a altura e calcular a largura correspondente.

Ao alterar a query da imagem para ?ims=400x, a altura será calculada automaticamente e a largura será definida como 400 pixels:

Por outro lado, ao usar a query ?ims=x100, a largura será calculada automaticamente, mas a altura será definida como 100 pixels:

O valor orig pode ser substituído para manter a dimensão original da imagem sem o corte automático.

A imagem a seguir tem a query ?ims=450xorig, mantendo a altura original, mas definindo a largura para 450 pixels:

Outra maneira de redimensionar uma imagem para ajustá-la a uma área específica é usar a query ?ims=fit-in/WidthxHeight.

A proporção da imagem original é preservada. Se a área especificada for maior que as dimensões da imagem, a imagem manterá seu tamanho original. Não é necessário especificar ambas as dimensões, pois uma ou ambas as dimensões da imagem podem ser menores que seus limites.

Uma imagem com a query ?ims=fit-in/400x400 será redimensionada para se ajustar ao limite máximo de tamanho da área que pode ocupar; nesse caso, 400 pixels de largura ou 400 pixels de altura, o que for atingido primeiro:

Corte imagens de uma coordenada para outra usando a query ims=AxB:CxD, onde:

• AxB é o ponto de partida para o corte. Ele indica as coordenadas, em pixels, do canto superior esquerdo da imagem onde o corte começa.
• CxD é o ponto final do corte. Indica as coordenadas, em pixels, do canto inferior direito da imagem, onde o corte termina.

Por exemplo, a query da URL da imagem ?ims=430x20:910x730 iniciará o corte na coordenada inicial de 430x20 pixels e terminará na coordenada 910x730 pixels.

Você pode rotacionar uma imagem à esquerda usando a query ?ims=filters:rotate(Angle). Você pode especificar Angle como os seguintes valores:

• 0: não rotaciona.
• 90: rotaciona a imagem 90° à esquerda.
• 180: rotaciona a imagem 180° à esquerda.
• 270: rotaciona a imagem 270° à esquerda.
• 360: não rotaciona.

Valores diferentes dos listados acima não irão rotacionar a imagem.

Essa imagem foi rotacionada por 270° através da query ?ims=filters:rotate(270):

Reduza o tamanho do arquivo e o tempo de transferência processando valores de qualidade mais baixos sem afetar o visual da imagem, adicionando a query ?ims=filters:quality(value). O valor deve ser um número inteiro entre 0 e 100, que representa o nível de qualidade que você deseja aplicar à imagem.

O valor de qualidade recomendado, que fornece otimização sem nenhuma perda perceptível de qualidade visual, é 85%.

A imagem a seguir tem a query ?ims=filters:quality(100), para 100% de qualidade:

A próxima imagem tem a qualidade recomendada de 85% por meio da query ?ims=filters:quality(85):

Por fim, a próxima imagem foi ajustada para 15% de qualidade com a query ?ims=filters:quality(15):

Adicione marcas d’água às suas imagens adicionando a query ?ims=filters:watermark(WatermarkURL,X,Y,Alpha), onde:

• WatermarkURL é o URL da imagem que você deseja inserir como marca d’água. Se o URL contiver parênteses, eles deverão ser codificados como %28 para ( e %29 para ).
• X representa a posição horizontal para a inserção da marca d’água. Os números positivos representam o deslocamento, em pixels, da borda esquerda para a borda direita, enquanto os números negativos representam o deslocamento da borda direita para a borda esquerda. Você pode usar o valor center, para centralizar a marca d’água horizontalmente, ou o valor repeat, para preencher a imagem horizontalmente com repetições da marca d’água.
• Y representa a posição vertical para a inserção da marca d’água. Os números positivos representam o deslocamento, em pixels, de cima para baixo, enquanto os números negativos representam o deslocamento de baixo para cima. Você pode usar o valor center, para centralizar a marca d’água verticalmente, ou o valor repeat, para preencher a imagem verticalmente com repetições da marca d’água.
• Alpha é a transparência da marca d’água. Deve ser um número entre 0 (completamente opaco) e 100 (completamente transparente).

Por exemplo, a query ?ims=filters:watermark(http://seudominio.com/watermark-image.png,-25,-10,50) aplicará uma marca d’água 25 pixels à esquerda do centro e 10 pixels abaixo do centro, com 50% de transparência.

Você pode converter a imagem em outro formato usando a query ?ims=filters:format(ImageFormat). O ImageFormat pode ser substituído por webp, jpeg, gif ou png.

Portanto, a imagem PNG http://yourdomain.com/image.png?ims=filters:format(gif) será convertida para o formato GIF:

Crie uma imagem derivada que seja maior que a original, mas, em vez de redimensioná-la para o tamanho necessário, você pode preencher a área com uma cor personalizada adicionando a query ?ims=fit-in/WidthxHeight/filters:fill(Color) a URL. Você pode usar os mesmos [parâmetros de redimensionamento] (#resize-to-fit-dimensions) com as dimensões desejadas para Width e Height.

Color é a cor de preenchimento, seguindo os valores de código hexadecimal.

Por exemplo, uma imagem com a query ?ims=fit-in/400x400/filters:fill(gray) terá seu entorno redimensionado para caber em uma área de 400x400 pixels, e a cor em torno dessa área será cinza:

Ao alterar o código de cor, você pode modificar a cor ao redor da área redimensionada, como ?ims=fit-in/300x400/filters:fill(008080):

Combine os filtros desejados separando-os com : em uma única string: filters:filter1(arg1):filter2(arg2).

Por exemplo, a query ?ims=fit-in/400x400/filters:fill(00ffff):quality(100) redimensionará uma imagem para caber em uma área de 500 por 500 pixels, preencherá a área redimensionada com a cor #00ffff e melhorará a qualidade para 100%: