Redimensionar / cortar imagens em PHP – Parte 1

28 Comentários

A gestão das dimensões das imagens é por norma uma situação critica para quem desenvolve para a web, sobretudo para quem desenvolve websites.

O utilizador nem sempre tem possibilidade de fornecer as imagens no tamanho desejado, devido ao pouco / nenhum conhecimento de ferramentas de edição de imagem, ou simplesmente porque não quer ter esse “trabalho”.

Resimensionar Imagens em PHP



Nestes casos, é da responsabilidade do programador implementar o(s) sistema(s) necessário(s) para que o redimensionamento das imagens seja feito automaticamente e sem necessidade de intervenção do utilizador.

Por norma a forma de efectuar estes redimensionamentos é básica e nem sempre com os resultados desejados, contudo, existe uma classe em PHP que permite que esta gestão do redimensionamento das imagens seja além de simples, bastante completa.

A classe que me refiro é: Resize Class de Jarrod Oberto

Como sei que alguns programadores que visitam o Ppleware ainda são júniores e ainda não têm conhecimentos de programação orientada a objectos, a explicação que darei do uso desta classe será apenas da forma como é implementada.

A parte 1 será sem upload de imagem.

Comecemos por fazer download da classe. Podem fazer o download aqui.

A implementação da classe é extremamente simples. Começamos por incluir a Classe.

include("resize-class.php");

1) Depois instanciámos a classe e indicamos qual a imagem a redimensionar

$resizeObj = new resize('exemplo.jpg');

2) Aqui é onde a “magia” acontece:

Indicámos qual a medida que queremos 150 largura e 100 de altura, e definimos qual o comportamento da classe

Existem 5 opções possíveis:

  • exact: que corta a imagem exactamente na medida definida
  • portrait: redimensiona a imagem e “pára” o redimensionamento quando encontra a medida da altura (100)
  • landscape: redimensiona a imagem e “pára” o redimensionamento quando encontra a medida da largura (150)
  • auto: redimensiona a imagem e pára quando encontra uma das medidas definidas (altura ou largura)
  • crop: redimensiona a imagem e corta na medida escolhida sem qualquer tipo de distorção.
$resizeObj -> resizeImage(150, 100, 'auto');

3) Guarda a imagem e define qual a qualidade que terá (de 0 a 100).

$resizeObj -> saveImage('exemplo-redimensionado.jpg', 100);

Como podem verificar é extremamente simples a utilização da classe. O tratamento de imagens na web fica bastante mais simplificado.

No próximo tutorial (parte 2) irei explicar como podemos efectuar o upload e redimensionar para mais do que um tamanho.

Download: Código de exemplo
Homepage: Image resizing PHP

Comentários

28

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

  1. Avatar de Pedro
    Pedro

    E porque não fazer isto com CSS?

    1. Avatar de Ricardo Soares
      Ricardo Soares

      o css não faz o mesmo que o artigo explica….
      não faz “realmente” o resize da imagem e não guarda o resize da imagem no disco

    2. Avatar de pixar
      pixar

      Em html ou css podemos redimensionar visualmente uma imagem, mas o seu tamanho em bytes mantém-se o mesmo. É disto que se trata.

    3. Avatar de Nuno Vieira
      Nuno Vieira

      Porque é ridículo estar-se a guardar uma imagem maior do que é necessário. Desta forma evitasse problemas que como por exemplo um cliente meu teve. A antiga pagina deste guardava a imagem sem efectuar nenhum tipo de redimensionamento. Como ele não tinha assim muitos conhecimentos nesta área, muitas vezes imagens que nem 200 pixeis de largura ocupavam na página, na realidade esta tinham 3000 pixeis de largura. Isto depois gerava que algumas páginas tinham que se transferir mais de 100MB em imagens para esta ser apresentada. Ora não é preciso ser um génio para perceber que transferir 100MB é tudo menos rápido (este era o problema dele). Isto agravava-se nos telemóveis porque a net é bem mais lenta que a fixa. Isto para não falar que quem tinha tarifários com limites baixos de download estouravam logo grande parte do seu plafond apenas a carregar uma simples página.

      1. Avatar de João Dias
        João Dias

        Para isso já há solução há algum tempo e o servidor pode bem ajudar nisso.

        Responsive images.
        http://www.awwwards.com/infographic-responsive-images-problems-and-solutions.html

        1. Avatar de Nuno Vieira
          Nuno Vieira

          Responsive images utiliza várias versões da mesma imagem conforme a largura de banda, dispositivo,… Logo sem nenhum tipo de pós processamento à imagem o problema iria se manter.

  2. Avatar de pedro
    pedro

    Mais um excelente artigo.
    Se podessem complementar a função de crop com a indicação como disponibilizar ao utilizador um modo gráfico onde o utilizador fizesse ele mesmo o crop desejado seria excelente!

      1. Avatar de Pedro
        Pedro

        Muito obrigado, vou testar mas parece-me ser esse o código que procurava! 🙂

        1. Avatar de Hélio Moreira
          Hélio Moreira

          Olá Pedro,

          Existe a possibilidade de ser o utilizador a “cortar” a imagem mas com o rácio definido (16:9 / 4:3 / etc).

          Dessa forma o local onde a foto vai aparecer não fica comprometido. Vou preparar um tutorial sobre essa possibilidade.

          Cumprimentos,
          Hélio Moreira

  3. Avatar de br
    br

    excelente artigo
    devem fazer mais artigos como este, sobre programação!
    lembro-me de um sobre android que foi esquecido…

    1. Avatar de Pedro Pinto

      Pois é, tens razão. A ver se conseguimos voltar a trazer a acção essas rubricas.

      PP

  4. Avatar de Tiago Correia

    Podiam continuar a fazer tutoriais identicos a este em PHP.

    Já agora, sabem como fazer, ou se existe algum script identico ao upload de imagens como o OLX, coisas.com ou auto.sapo.pt?? Com HTML5+CSS3+AJAX/JS
    Fazer envio de imagens, aparecer mal se carrega, e depois enviar 😉

    1. Avatar de Bónus

      Não conheço o envio nesses sites, mas se é o que eu penso tens 2 hipóteses: Com o upload em ajax ou com o upload submetido através dum form dentro de um iframe. Já usei os dois, funcionam ambos bem e não vejo vantagem em nenhum em relação ao outro. É uma questão de opção.
      Tanto num como no outro não usei HTML5 nem CCS3.

  5. Avatar de EXP001

    Já que estamos numa de programação e como hoje me cai isto nas mãos.
    Tenho exportar um html para pdf e estou a utilizar a biblioteca dompdf o problema é que esta aparentemente não aceita fontes .EOT.
    Alguem conhece alguma forma de converter de .EOT para .ttf ou alguma biblioteca que faça o export para pdf com esta extensao de fontes ?
    Desde ja agradeço. Obrigado

    1. Avatar de Bónus

      Dá uma vista de olhos no FPDF.

    2. Avatar de cerzedelo
      cerzedelo

      Tente a livraria html2pdf

  6. Avatar de Paulo
    Paulo

    Excelente artigo. Quero dar os parabéns ao pplware pela iniciativa. Fico aguardar mais artigos sobre programação web.

    cumps

  7. Avatar de Pedro Fernandes
    Pedro Fernandes

    Entre outras coisas, estava mesmo a precisar disto para o trabalho que estou a fazer em php. Obrigado!

  8. Avatar de pedro
    pedro

    Em alternativa pode utilizar-se a libraria Imagick.
    Aqui fica 1 bom tutorial!
    http://www.phpro.org/tutorials/Imagick.html

  9. Avatar de André Duarte
    André Duarte

    Ok, reparei agora que puseram um link idêntico no final do artigo. Peço desculpa mas não tinha reparado.

  10. Avatar de Luis Antonio
    Luis Antonio

    Olá, tudo bem? Quero agradecer pelo código, muito bom mesmo, resolveu um problema que eu tinha. Parabéns! Funcionou certinho no meu site. Excelente!!!

    1. Avatar de Hélio Moreira

      Olá Luis,

      Ainda bem que ajudou a resolver esse problema!

      Abraço,
      Hélio Moreira

  11. Avatar de Isaac Bruno
    Isaac Bruno

    Olá. Quando salvo a imagem a mesma fica redimensionada, mas totalmente preta, tudo que há nela se apaga

    1. Avatar de Hélio Moreira
      Hélio Moreira

      Olá Isaac,

      Podes pf enviar-me o código e imagem que estás a utilizar?

      Abraço

  12. Avatar de Anderson
    Anderson

    Obrigado. Seu código me ajudou muito.

  13. Avatar de Gabriel
    Gabriel

    Olá

    Como faço o front office?