Criar Thumbs De Imagens Com PHP

Nesta matéria veremos como gerar miniaturas de imagens (thumb) para uma galeria de fotos, apresentação de produtos ou qualquer outra aplicação, estando a imagem em boa resolução.

No mercado geralmente encontramos sistemas para tratamento de imagens (como o Corel, Photoshop, Fireworks, entre outros), porém, se pudermos usar uma solução “gratuita” e “prática”, certamente facilitará não apenas para o Administrador, mas principalmente para o Usuário que está enviando as imagens.

Já pensou na dificuldade que aquele jornalista leigo de Internet tería? Antes de publicar uma matéria ter de tratar a imagem em um editor de imagens? Só para montar um thumb?

Bem… usando o script que disponibilizamos na matéria de hoje, com certeza essa dificuldade vai acabar.

Código Do Script Para Criar Thumbs

Há um tempo atrás quando eu estava iniciando na programação web, eu precisava usar uma solução como esta e sofri para encontrar algo que pudesse me ajudar!

Tive de instalar bibliotecas, “debugar” scripts monstruosos e estourar prazo de entrega do Projeto!

Bem… não quero que aconteça isso contigo, por esse motivo, até para facilitar seus trabalhos, foquei tudo no ficheiro “index.php”, disponibilizando alguns eventos no diretório “js” (para o JavaScript).

Conheça abaixo algumas funções utilizadas no Sistema e veja no final como ela funciona na prática!

OBS.: Não se preocupe em copiar as funções, tente apenas entender como elas funcionam.

No final desta matéria você terá o ficheiro zipado disponível para testes.

Através da função abaixo seu sistema poderá coletar as informações da imagem (extensão, tamanho, etc):



function resizeImage($image,$width,$height,$scale) {
  list($imagewidth, $imageheight, $imageType) = getimagesize($image);
  $imageType = image_type_to_mime_type($imageType);
  $newImageWidth = ceil($width * $scale);
  $newImageHeight = ceil($height * $scale);
  $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
  switch($imageType) {
    case "image/gif":
      $source=imagecreatefromgif($image);
      break;
      case "image/pjpeg":
    case "image/jpeg":
    case "image/jpg":
      $source=imagecreatefromjpeg($image);
      break;
      case "image/png":
    case "image/x-png":
      $source=imagecreatefrompng($image);
      break;
    }
  imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
  
  switch($imageType) {
    case "image/gif":
        imagegif($newImage,$image);
      break;
        case "image/pjpeg":
    case "image/jpeg":
    case "image/jpg":
        imagejpeg($newImage,$image,90);
      break;
    case "image/png":
    case "image/x-png":
      imagepng($newImage,$image);  
      break;
    }
  
  chmod($image, 0777);
  return $image;
}

Baseado nas definições acima, esta função abaixo deverá gerar o tamanho, tipo de imagem usado no thumb, etc.


function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
  list($imagewidth, $imageheight, $imageType) = getimagesize($image);
  $imageType = image_type_to_mime_type($imageType);
  
  $newImageWidth = ceil($width * $scale);
  $newImageHeight = ceil($height * $scale);
  $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
  switch($imageType) {
    case "image/gif":
      $source=imagecreatefromgif($image);
      break;
      case "image/pjpeg":
    case "image/jpeg":
    case "image/jpg":
      $source=imagecreatefromjpeg($image);
      break;
      case "image/png":
    case "image/x-png":
      $source=imagecreatefrompng($image);
      break;
    }
  imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
  switch($imageType) {
    case "image/gif":
        imagegif($newImage,$thumb_image_name);
      break;
        case "image/pjpeg":
    case "image/jpeg":
    case "image/jpg":
        imagejpeg($newImage,$thumb_image_name,90);
      break;
    case "image/png":
    case "image/x-png":
      imagepng($newImage,$thumb_image_name);  
      break;
    }
  chmod($thumb_image_name, 0777);
  return $thumb_image_name;
}

Prático, não?

Bem… além dessas funções, temos outras menores que podem ser usadas não apenas nesse sistema, mas em outros Sistemas!

Ex.:

Pega o tamanho Height da imagem:


function getHeight($image) {
  $size = getimagesize($image);
  $height = $size[1];
  return $height;
}

Pega o tamanho Width da imagem:


function getWidth($image) {
  $size = getimagesize($image);
  $width = $size[0];
  return $width;
}

Cria o diretório onde serão armazenadas as imagens e dá as permissões (se ainda não existir):


if(!is_dir($upload_dir)){
  mkdir($upload_dir, 0777);
  chmod($upload_dir, 0777);
}

Só deverá permitir o envio se o arquivo for JPG, PNG ou GIF e se o tamanho permitido estiver dentro do limite:


if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {

foreach ($allowed_image_types as $mime_type => $ext) {
  if($file_ext==$ext && $userfile_type==$mime_type){
    $error = "";
      break;
    }else{
    $error = "Só <strong>".$image_ext."</strong> imagens são aceitas para upload<br />";
    }
  }
  if ($userfile_size > ($max_file*1048576)) {
    $error.= "As imagens precisam estar dentro do limite de ".$max_file."MB";
  }
  
}else{
  $error= "Selecione uma imagem para upload";
}

Prático, não?

Vamos ver agora como esse ficheiro funciona na prática?

PASSO 1 – Upload da imagem:

PASSO 2 – Tratando a imagem:

Pronto? Após escolher o melhor local da imagem para gerar seu thumbnail, basta apenas clicar em salvar!

Claro, você poderá fazer melhorias, como:

  • Salvar o conteúdo em base de dados;
  • Alterar o diretório, layout da página, etc.

É um script simples, mas creio que ele facilitará e muito seus trabalhos no dia a dia.

Download do código usado neste tutorial: Criando Thumbs De Imagens Com PHP

Be Sociable, Share!

8 Comentários

  1. Olá amigo, ótimo tutorial, eu ainda não testei pois estou em meu serviço mas depois vou testar em casa, gostaria de saber se você poderia dar continuidade explicando como poderiamos implementar esse sistema em um sistema de notícias pra salvar o arquivo no banco de dados e fazer uma consulta fazendo visualizar a miniatura. Um grande abraço. Parabéns pelo site

  2. Gente eu usei este script aew do cara que fico muito massa… e também eu consegui inserir no banco de dados, mas os unicos dados que eu consegui inserir foram os dados que foram trazidos do próprio script…
    se crio mais um campo no form ele nao passa os dados para o banco de dados pq ele vai executar o script e nao vai dar bola para o meus dados novos 
    alguem tem alguma ideia do que eu posso fazer para ele pegar mais dados na verdade eu so quero um…que é nome que vai para o banco de dados…
    eu tenho uma ideia do que tem que fazer que tenho quase certeza que iria funcionar, mas eu nao sei aplicar isso :( sou muito noob ainda… mas to tentando e se conseguir dou um toque

  3. Código Muito bom…!! Caiu como uma luva *-* e ainda consegui levar os dados para o banco de dados *–* e exibir na galeria, Valeu cara *——*

  4. Men muito bom o codigo, mais não conseguir isirir no banco de dados :s
    poderia postar um tuto sobre isso não ?

    • victor

      depois de inserir as imagens no diretório (pasta de destino do seu pc)  , pega o nome da imagem com um script  que é fácil de encontrar na net … ai você faz um insert into e  insere no banco de dados … : )

Participa! Comenta...