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

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

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

A 4Linux — uma empresa líder em soluções Open Source e em práticas DevOps — está procurando profissionais para trabalhar como gerente técnico, que tenha bons conhecimentos em Linux e Softwares Livres. São duas vagas: uma para trabalhar em Brasília e outra para São Paulo.

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

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

O evento irá abordar a forte disseminação de sistemas Linux em toda a estrutura de informação e mostrará a importância de técnicos da área serem capazes de identificar rotas, especificar controles de acesso para usuários Linux e monitorar a atividade privilegiada do usuário ao longo da rede de informação e, especialmente, na complexidade da nuvem. Participantes poderão requerer gratuitamente os créditos de CPE (Continuing Professional Education).

Novas vagas para os minicursos do WikiLab

Publicado em: 16/05/2017 às 11:59 | leituras |

Novas vagas abertas para os minicursos do WikiLab. Todos que já apoiaram ou apoiarem o projeto WikiLab no Catarse (com qualquer valor) podem participar.

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

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

Novo evento sobre Software Livre será realizado no Instituto de Estudos Superiores da Amazônia (IESAM).

Soluti Certificação Digital em busca de especialista Linux

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

A Soluti Certificação Digital está em busca de um profissional para atuar como especialista Linux em Goiânia.


Mais notícias

lançamento!

LM 119 | Backup e Restauração




Impressa esgotada
Comprar Digital  R$ 10,90 Digital

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

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

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

    Publicado em 19/04/2017 às 17:18 | 306574 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 | 221862 leituras

  1. Resultado do concurso "Por que eu mereço ganhar um netbook?"

    Publicado em 30/09/2009 às 3:00 | 184861 leituras

  1. Software público brasileiro na Linux Magazine Especial

    Publicado em 29/07/2011 às 15:07 | 163237 leituras

  1. Prorrogação no prazo da venda de ingressos com desconto para a LinuxCon

    Publicado em 15/06/2010 às 15:25 | 8412 leituras

  1. Novell estaria dispensando 20% dos funcionários alocados para o projeto openSUSE

    Publicado em 18/02/2009 às 23:35 | 7786 leituras

  1. Dell torna-se uma empresa privada. Acionistas aceitam proposta de US$ 24,9 bi

    Publicado em 12/09/2013 às 15:26 | 6843 leituras

  1. Um primeiro passo para governos abertos

    Publicado em 07/12/2011 às 15:09 | 8848 leituras

  1. Java 7 Update 21 corrige vulnerabilidades de segurança e restringe applets

    Publicado em 17/04/2013 às 16:18 | 11927 leituras

whitepapers

mais whitepapers