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.

Implementação

Suporte a formatos de imagens

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

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

Redimensionar a imagem

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:

Autocrop

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:

Preservar proporção

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:

Manter a dimensão original

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:

Redimensionar para ajustar a limites

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:

Cortar imagens

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.

Rotacionar imagens

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):

Alterar qualidade

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):

Adicionar uma marca d’água

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

• WatermarkURL é a URL da imagem que você deseja inserir como marca d’água. Se a URL contém parênteses, eles devem ser codificados como %28 para ( e %29 para ).
• X representa a posição horizontal para a inserção da marca d’água. Números positivos representam o deslocamento, em pixels, da esquerda para a direita, enquanto números negativos representam o deslocamento da direita para a esquerda.
  • Insira o valor center para centralizar a marca d’água horizontalmente.
  • Insira o valor repeat para preencher a imagem com repetições horizontais da marca d’água.
  • Insira um número positivo ou negativo seguido de um p (por exemplo, 20p) para calcular a posição horizontal como uma porcentagem da largura da imagem.
• Y representa a posição vertical para a inserção da marca d’água. Números positivos representam o deslocamento, em pixels, de cima para baixo, enquanto números negativos representam o deslocamento de baixo para cima.
  • Insira o valor center para centralizar a marca d’água verticalmente.
  • Insira o valor repeat para preencher a imagem com repetições verticais da marca d’água.
  • Insira um número positivo ou negativo seguido por um p (por exemplo, 20p) para calcular a posição vertical como uma porcentagem da largura da imagem.
• Alpha define a transparência da marca d’água. Deve ser um número entre 0 (completamente opaco) e 100 (completamente transparente).
• WidthRatio é um parâmetro opcional que define a largura da marca d’água como uma porcentagem em relação à imagem. Se você não especificar um valor, ele será definido como none.
• HeightRatio é um parâmetro opcional que define a altura da marca d’água como uma porcentagem em relação à imagem. Se você não especificar um valor, ele será definido como none.

Por exemplo, a query ?ims=filters:watermark(http://seudominio.com/imagens-marca-dagua.png,repeat,20p,50,10,none) repetirá a marca d’água horizontalmente, a 20% da altura da imagem, com 50% de transparência, redimensionada para 10% da largura da imagem.

Converter imagem em outro formato

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

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

Preencher imagem

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):

Combinar filtros

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%: