Artigo

Ajuste de imagens com GD para enquadramento de layout

A relação de processamento cliente/servidor está cada dia mais complexa, com plugins JavaScript que fazem praticamente tudo. É necessário pensar no cliente e não depender dele para o funcionamento de um sistema. Utilizar PHP para processamento de imagem é rapido, controlado e não possui custo de processamento no lado cliente. Este artigo mostra um caso real de onde e porque utilizar processamento de imagens no lado servidor.

Em algumas situações, precisamos cortar imagens pra que as mesmas se enquadrem corretamente ao layout criado anteriormente. Após me deparar com vários problemas neste sentido, resolvi confiar mais na ferramenta, e escrever um código confiável para isso.

Um caso recente, e que demonstra bem a situação, foi um website no qual estava trabalhando. Precisávamos exibir as imagens do Instagram, porém, elas deveriam ser apresentadas em formato de losango, como mostra a figura 1.

Figura 1 Exibição das imagens do Instagram, com corte necessário para o layout.

Para cada problema, uma solução

Para resolver este problema, poderíamos ter utilizado vários recursos, e pensamos sempre em desenvolvimento front-end para tal. Chegamos a conclusão de que isso seria custoso: a cada carregamento da página, seria necessário buscar as imagens no Instagram e processá-las para obter o efeito. Pensando no custo de processamento, vimos que esta não era uma solução eficiente e então pensamos em utilizar recursos HTML: isso também não seria possível pois muitos dos acessos analisados pelo Google Analytics, partiam do Internet Explorer 8 e 9, que não suportavam tais recursos.

Foi então que partimos para uma solução transparente, e a ideia era muito simples: agendar uma tarefa no CRON para buscar as imagens no Instagram, processá-las, e salvá-las localmente. Com isso, não teríamos picos de processamento e não faríamos requisições a todo momento para o Instagram.

Desenvolvimento da solução

Muitos desenvolvedores tem um receio em utilizar determinados recursos que vão além do comum, como conexão com banco de dados, contas e exibição de variáveis. Porém, quando começamos a estudar e analisar as possibilidades, vimos que soluções simples podem resolver problemas complexos de forma mais eficiente.

Pensando nisso, o algoritimo para o corte da imagem no formato necessário foi desenvolvido da forma mais básica possível, percorrendo pixel à pixel uma determinada imagem e copiando o pixel correto para a imagem de destino. Pixel à pixel, verificamos que a posição está dentro do losango necessário, como mostra a figura 2.

Figura 2 Exibição da imagem origem e imagem destino com o corte efetuado.

Para conseguir o efeito esperado, lemos o arquivo previamente baixado do Instagram e criamos uma imagem com o tamanho necessário utilizando o redimensionamento, e outra do mesmo tamanho, transparente:



// Tamanhos
$new_width = 392;
$new_height = 392;

// Busca a dimensão
list ($width, $height) = getimagesize($filename);

// Cria uma imagem transparente
$image_t = imagecreatetruecolor($new_width, $new_height);
imagealphablending($image_t, false);
$col = imagecolorallocatealpha($image_t, 255, 255, 255, 127);
imagefilledrectangle($image_t, 0, 0, 485, 500, $col);
imagealphablending($image_t, true);

Agora que temos as duas imagens, a origem e a imagem destino, com o mesmo tamanho, mas completamente transparentes, será necessário criar dois loops, percorrendo horizontalmente, pixel à pixel as imagens. Quando a “linha” de pixels acabar, será iniciada novamente na linha de pixels imediatamente abaixo e assim será até o final da imagem.

Neste loop, é feita uma verificação: se o cursor atual está dentro do losango. Caso esteja, copia o pixel para a imagem de destino.
A conta feita para saber se o cursor está dentro do losango pode parecer complicada de explicar, porem é uma equação muito simples, já que as pontas do losango vão do meio horizontal ao meio vertical da imagem.



// Percorre a largura (pixel by pixel)
for ($x = 1; $x < $new_width - 1; $x ++) {
    // Percorre a altura (pixel by pixel)
    for ($y = 1; $y < $new_height - 1; $y ++) {
        // Verifica se está dentro do losango
        if ($x < ($new_width / 2)) {
            if (($y > (($new_height / 2) - $x)) && ($y < (($new_height / 2) + $x))) {
                $rgb = imagecolorat($image_p, $x, $y);
                imagesetpixel($image_t, $x, $y, $rgb);
            }
        }
        else {
            if (($y > (($new_height / 2) - ($new_width - $x))) && ($y < (($new_height / 2) + ($new_width - $x)))) {
                $rgb = imagecolorat($image_p, $x, $y);
                imagesetpixel($image_t, $x, $y, $rgb);
            }
        }
    }
}


Após percorrer todos os pixels, falta somente salvar e destruir o recurso para liberar memória:

// Output
imagealphablending($image_t, false);
imagesavealpha($image_t, true);
imagepng($image_t, $destiny, (9 / 100) * 90);

// Free
imagedestroy($image);
imagedestroy($image_t);
imagedestroy($image_p);

O resultado é o exibido na figura 3.

Figura 3 Exibição da imagem final, pronta para ser utilizada.

Conclusão

Após pensar muito no desempenho e discutir exaustivamente qual seria de fato a função do cliente e qual é a função do servidor, notamos que adicionar recursos de processamento, mesmo quando se trata de um layout dinâmico, esta deve ser uma função do servidor.

O PHP é atualmente uma linguagem muito poderosa, que pode realizar coisas inimagináveis com a criatividade certa e as pesquisas e desenvolvimento corretos. Neste artigo, por exemplo, utilizamos algumas poucas funções da biblioteca GD e pudemos fazer um processamento completo de imagem de maneira simplificada.