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.


Por Bruno Pitteli Gonçalves



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.


 


Bruno Pitteli Gonçalves é atualmente diretor de desenvolvimento na Prime Seven Web Solutions, especialista em engenharia de software, depois de muito trabalhar com servidores UNIX. Já trabalhou com sistemas como SAP Business One, onde aperfeiçoou sua gestão de negócios e sistemas distribuídos, integrando sistemas de diferentes portes em VB e C#. Já trabalhou com linguagens como Python, C, ASP, mas atualmente é especialista em PHP, trabalhando com tecnologias de ponta, como Zend Framework e PHP-GTK, onde neste ultimo é um dos instigadores no Brasil e bastante ativo na comunidade central. Acredita que um desenvolvedor nunca deva se apegar à uma tecnologia ou uma linguagem, mas sim focar no desenvolvimento ágil e seguro, utilizando a tecnologia adequada para cada cenário.

Contato com o autor:

Site: http://bruno.pitteli.com.br
Email: scorninpc@php.net

Notícias

Linux Developer Conference Brazil: faltam poucos dias!

Publicado em: 14/08/2018 às 11:57 | leituras |

Evento será realizado nas dependências da UNICAMP, em Campinas, nos dias 25 e 26 de agosto.

Leitor da Linux Magazine paga meia para entrar no FISL18

Publicado em: 06/07/2018 às 21:05 | leituras |

Parceria entre a ASL.org e a Linux Magazine disponibiliza código promocional que fornece 50% de desconto na inscrição para o FISL18.

DevOpsDays chega a Maringá pela primeira vez

Publicado em: 20/03/2018 às 18:25 | leituras |

O DevOpsDays terá sua sétima edição no Brasil sendo sediada na cidade de Maringá, no Paraná, dias 23 e 24 de março, no Sebrae. O evento acontece em mais de 40 países e nele foi criado o termo "DevOps" (em 2009, na cidade de Gante - Bélgica).

SENAI/Fatesg promove segundo Meeting Hacker Senai

Publicado em: 18/02/2018 às 12:47 | leituras |

No dia 24/02/2018 a partir das 8:00h, o SENAI/Fatesg realizará o segundo Meeting Hacker Senai, com a participação do LPI, da Infomach e da Barketilly.

Certificações LPI: o caminho para turbinar a sua carreira

Publicado em: 13/10/2017 às 15:50 | leituras |

O Linux Professional Institute (LPI) oferecerá provas de certificação na Latinoware, em Foz do Iguaçu, em outubro, na Poticon, em Natal e no FGSL em novembro. Fique antenado! Este artigo elenca as últimas novidades sobre o LPI.


Mais notícias

lançamento!

LM 119 | Backup e Restauração




Impressa esgotada
Comprar Digital  R$ 10,90 Digital

  1. Soluti Certificação Digital em busca de especialista Linux

    Publicado em 19/04/2017 às 17:18 | 584098 leituras

  1. Seminário sobre gestão de privilégios do Linux dá direito a certificado CPE

    Publicado em 23/05/2017 às 10:35 | 501719 leituras

  1. Baixe o curso de shell script do Julio Cezar Neves

    Publicado em 07/04/2008 às 19:41 | 473188 leituras

  1. 4Linux abre vagas para Líder Técnico em São Paulo e Brasília

    Publicado em 25/07/2017 às 14:12 | 345986 leituras

  1. Novo evento "Universidade Livre" será realizado em Belém/PA em 06/05/2017

    Publicado em 28/04/2017 às 11:19 | 295482 leituras

  1. Android Design é guia de estilo para aplicativos Android

    Publicado em 13/01/2012 às 18:20 | 16052 leituras

  1. Enfim, Samba 4!

    Publicado em 14/12/2012 às 9:15 | 32012 leituras

  1. Distribuição FAN instala o Nagios e várias ferramentas

    Publicado em 30/09/2008 às 11:25 | 29797 leituras

  1. Estamos em guerra: Começam os ataques aos servidores DNS

    Publicado em 29/07/2008 às 12:15 | 10408 leituras

  1. Samsung lança oficialmente o Galaxy SIII no Brasil

    Publicado em 06/06/2012 às 17:08 | 15613 leituras

whitepapers

mais whitepapers