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

Livro sobre Métodos Ágeis disponibilizado livremente

Publicado em: 14/02/2019 às 15:20 | leituras |

"Scrum - Projetos Ágeis e Pessoas Felizes", de autoria de Cesar Brod, disponibilizado de forma livre (Creative Commons) para download e consulta.

Papo de SysAdmin vai lançar Club DevOps

Publicado em: 19/01/2019 às 17:53 | leituras |

Plataforma deverá ser ambiente para reciclagem e capacitação em tecnologias DevOps.

Assespro-PR é o mais novo parceiro de canal do LPI no Brasil

Publicado em: 18/12/2018 às 11:10 | leituras |

A Assespro-PR — Associação das Empresas Brasileiras de Tecnologia da Informação —, e o Linux Professional Institute – LPI, firmaram uma parceria que deverá beneficiar as empresas associadas à Assespro-PR, bem como contribuir para a profissionalização do mercado de Software Livre e de Código Aberto no Paraná.

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.


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 | 595396 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 | 512728 leituras

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

    Publicado em 07/04/2008 às 19:41 | 489539 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 | 357716 leituras

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

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

  1. Xen: dom0 no Linux 2.6.27

    Publicado em 28/11/2008 às 11:22 | 14151 leituras

  1. UOL lança Painel de Controle Inteligente para serviços de computação em nuvem

    Publicado em 06/06/2012 às 12:35 | 17042 leituras

  1. Bull migra estações de 8.000 funcionários para o OpenOffice.org

    Publicado em 28/02/2010 às 10:41 | 15161 leituras

  1. Google dará R$ 4 milhões a ONGs com as melhores ideias sociais

    Publicado em 11/02/2014 às 13:03 | 11401 leituras

  1. Gerenciamento das áreas de trabalho com o Cinnamon 1.4

    Publicado em 16/03/2012 às 10:53 | 21922 leituras

whitepapers

mais whitepapers