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

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.

Blog do maddog: Ambientes de nuvem privada virtual

Publicado em: 06/10/2017 às 14:09 | leituras |

O Subutai é uma solução de nuvem de código aberto, ponto a ponto (P2P), segura e estável, que cria ambientes de nuvem privada virtual (VPC) para usuários finais usando um modelo de nuvem de contêineres como serviço (CaaS). O usuário final pode instalar qualquer tipo de serviço, aplicativo ou software de infraestrutura que desejar nas máquinas em execução nessa nuvem.

Ambientes de nuvem privada virtual

Publicado em: 06/10/2017 às 13:23 | leituras |

O Subutai é uma solução de nuvem de código aberto, ponto a ponto (P2P), segura e estável, que cria ambientes de nuvem privada virtual (VPC) para usuários finais usando um modelo de nuvem de contêineres como serviço (CaaS). O usuário final pode instalar qualquer tipo de serviço, aplicativo ou software de infraestrutura que desejar nas máquinas em execução nessa nuvem.

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


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 | 541467 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 | 458483 leituras

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

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

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

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

  1. Tux3, um sistema de arquivos com futuro e passado promissores

    Publicado em 29/07/2008 às 11:26 | 10585 leituras

  1. Plataforma MeeGo para celulares ganha versão para desenvolvedores

    Publicado em 02/07/2010 às 16:20 | 9385 leituras

  1. Red Hat atualiza virtualização e produtos OpenStack

    Publicado em 13/06/2013 às 16:36 | 8875 leituras

  1. Google Earth no navegador

    Publicado em 02/06/2008 às 13:05 | 8016 leituras

  1. Os segredos do Flame revelados

    Publicado em 19/09/2012 às 14:49 | 9490 leituras

whitepapers

mais whitepapers