Recortar imagens com PHP(CroppedThumbnail x Jcrop)

Bom, pra quem ainda não sabe, estou fazendo um site, será um concurso de beleza e essa semana tive que dar um jeito em um problema e tive uma grata surpresa, resolvi compartilhar com vocês.
Vocês já tiveram aquele problema da imagem cortar uma parte relevante do conteúdo ao recortar uma imagem automaticamente com PHP por exemplo?
Pra quem ainda não manja muito, vou postar a função em php que a maioria usa quando se trata de dar um "CROP" numa imagem(gerar thumbnails):


function CroppedThumbnail($thumbnail_width,$thumbnail_height,$imgSrc) {
    list($width_orig, $height_orig) = getimagesize($imgSrc);   
    $myImage = imagecreatefromjpeg($imgSrc);
    $ratio_orig = $width_orig/$height_orig;
    if ($thumbnail_width/$thumbnail_height > $ratio_orig) {
       $new_height = $thumbnail_width/$ratio_orig;
       $new_width = $thumbnail_width;
    } else {
       $new_width = $thumbnail_height*$ratio_orig;
       $new_height = $thumbnail_height;
    }
    $x_mid = $new_width/2;  //horizontal middle
    $y_mid = $new_height/2; //vertical middle
    $process = imagecreatetruecolor(round($new_width), round($new_height)); 
    imagecopyresampled($process, $myImage, 0, 0, 0, 0, $new_width, $new_height, $width_orig, $height_orig);
    $thumb = imagecreatetruecolor($thumbnail_width, $thumbnail_height); 
    imagecopyresampled($thumb, $process, 0, 0, ($x_mid-($thumbnail_width/2)), ($y_mid-($thumbnail_height/2)), $thumbnail_width, $thumbnail_height, $thumbnail_width, $thumbnail_height);
    return imagejpeg($thumb,null,100);
}

A função se auto-explica, apesar de estar em inglês. Ela diminui a imagem mantendo a proporção, até chegar a medida de corte desejada, centraliza a imagem e corta o que sobra. Exemplo: uma imagem de 1440x900 tem que gerar uma miniatura de 50x50, se o 900 assumir o valor de 50 o 1440 assumirá 80, ficando 80x50, como a largura ficou maior que 50 a imagem será centralizada ficando 15 | 50 | 15 , os 15 que sobram dos lados serão excluídos, e pronto a função retorna a imagem com a resolução correta a ser exibida.
OBS: falta setar o header pra imagem jpg, e a conta não é feita bem assim, mas o resultado é este.


Esta é uma ótima função porém nem sempre atende as nossas necessidades, como no meu caso. Aí procurei algo sobre crop com preview em javascript e pronto, primeiro achei um link quebrado, depois, achei essa obra, que se não for prima é muito boa, ainda estou com inveja de quem programou...rs

Você pode baixar tudo que precisar e testar os exemplos neste site: http://deepliquid.com/content/Jcrop.html

No meu caso eu utilizei esse exemplo como base: http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail (na verdade não peguei essa página do site, mas sim o exemplo similar que vem no arquivo zip)

Entre as principais mudanças que fiz, foi no script dele, adicionando um código que vi no outro modelo:


  function updateCoords(c)
  {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

  function checkCoords()
  {
    if (parseInt($('#w').val())) return true;
    alert('Selecione a area de corte.');
    return false;
  };

O checkCoords() serve pra você colocar no onSubmit do form, pois se o usuário não tiver selecionado nada impede o formulário de ser enviado.

Fiz essa outra mudança, antes no onSelect estava updatePreview também, mudei pra updateCoords.

$('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updateCoords,
      aspectRatio: xsize / ysize
    }


Agora que a gente sabe onde a pessoa quer recortar a imagem é só passar os dados pro php, eu fiz isso por um post de formulário, que tinha os inputs:

<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />

Também tinha outros, mas não vem ao caso. No PHP fiz assim:


        $targ_w = $_POST['largura'];
$targ_h = $_POST['altura'];
$jpeg_quality = 100;

$src = $_POST['link'];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
        return imagejpeg($dst_r,null,100);

Bom gente é isso aí, pra mim esse Jcrop foi uma boa mão na roda, se fosse desenvolver do 0 algo do tipo ia demorar tanto que não iria colocar o site no ar esse mês ainda(que é meu plano).

O post de hoje não foi muito pra explicar como se usa, até porque além de simples o Jcrop tem suas documentações próprias, que eu nem cheguei a ler na verdade, como falei, peguei os exemplos e fui na tentativa e erro até ficar como eu queria...rs 

Uma dica pra quem desenvolve e costuma ler as documentações, bom eu acho que se tem exemplos primeiro veja se você não pode aproveitar eles, só depois que não tiver por onde partir comece a ler, porque você pode juntar 2 demonstrações e depois ler a documentação pra completar só uma partezinha que ficou faltando e pronto, ta lindo e sem problemas, da mesma forma que ficaria se você lesse um monte...rs Mas se você gosta de ler, tudo bem vá em frente, é apenas minha humilde opnião...rs ^^



Comentários

Postagens mais visitadas deste blog

Stayfilm - Avaliação

Como zerar Drag Racing do Android

Cordão em crochê