27

Eu preciso fazer o upload de uma foto e em seguida coloca-la em um modal para o usuario fazer um recorte proporcional 4/3 uma breve pesquisa na web encontrei este plugin jQuery jCrop.

Ele parece me fornecer as coordenadas para recortar a imagens, mas não faço ideia de como integrá-lo com PHP. Se alguém tiver um exemplo prático será muito bem vindo.

3
  • Não sei se é possível fazer isso com JavaScript. Acho que o máximo que da pra fazer é pegar as dimensões que você quer (utilizando JS) da imagem e enviar para o servidor processar isso. Mas não tenho certeza, melhor esperar alguém que manje mais do assunto pra dizer.
    – gabrielhof
    Commented 26/09/2014 às 17:39
  • Dá sim, @gabrielhof. Mas a pergunta é sobre como passar as coordenadas para o PHP.
    – bfavaretto
    Commented 26/09/2014 às 17:49
  • 3
    Só como referência, essa outra biblioteca permite recortar uma imagem em formatos arbitrários, não somente retangulares. Aqui está um exemplo no jsFiddle
    – mgibsonbr
    Commented 26/09/2014 às 17:54

2 Respostas 2

15
+50

Para fazer o recorte da foto você precisa usar uma extensão PHP que manipula imagens, as mais conhecidas são GD e ImageMagick.

Simples implementação para PHP 5 >=5.5 utilizando a GD

$ini_filename = 'imagens/img.jpg'; // path da imagem
$im = imagecreatefromjpeg($ini_filename); // criando instancia jpeg

//definindo coordenadas de corte
$to_crop_array = array('x' =>20 , 'y' => 20, 'width' => 200, 'height'=> 200); 
$thumb_im = imagecrop($im, $to_crop_array); // recortando imagem

imagejpeg($thumb_im, 'imagens/new_img.jpg', 100); // salvando nova instancia

Exemplo baseado em


jQuery Picture Cut

Caso você queira eu recomendo este Plugin jQuery é bem simples de implementar e completo possui ambas as implementações tanto client-side quanto server-side.

HTML

<div id="container_image"></div>

JavaScript

$("#container_image").PictureCut({                    
    InputOfImageDirectory       : "image",
    PluginFolderOnServer        : "/jquery.picture.cut/",
    FolderOnServer              : "/uploads/",    
    EnableCrop                  : true,
    CropWindowStyle             : "Bootstrap",              
});

Implementação server side

Demo

Documentação

2
  • 1
    Muito interessante esse jQuery Picture Cut, parece resolver todas minhas necessidades Commented 26/09/2014 às 18:14
  • 1
    Parabens Vinicius, ficou muito boa sua explicação.
    – heat
    Commented 30/09/2014 às 11:26
15

Configurações iniciais

Como se trata de um plugin jQuery precisamos da chamada para a biblioteca em algum lugar de nosso HTML. Além disso, vamos precisar também incluir o arquivo fonte do jCrop com sua folha de estilo e imagens necessárias.

<link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>

Desse jeito já dá pra utilizar o jCrop em sua forma mais básica:

<img src="imagem.jpg" width="634" height="340" id="jcrop" />
<script type="text/javascript">
$(function(){ 
    $('#jcrop').Jcrop(); 
});
</script>

No exemplo acima, ‘#jcrop’ é o atributo ID da imagem alvo do crop. Você pode utilizar qualquer tipo de seletor do jQuery (classes, sub-elementos etc.), aplicando o frontend do crop em vários elementos img.

O plugin funciona apenas no cliente, na interface da aplicação. O crop mesmo tem que ser feito no servidor.

Processando o crop com PHP Primeiramente vamos entender como funciona o jCrop. Seu método de marcação na imagem retorna um array com as dimensões e o posicionamento do crop. Ele possui alguns eventos, aqui vamos utilizar os dois principais: onChange e onSelect. O onChange executa uma função qualquer no momento que a marcação é alterada e o onSelect executa uma função qualquer no momento que a seleção está em andamento.

Sendo assim, vamos utilizar, por enquanto, a função exibePreview em ambos os casos. O que ela faz é atualizar uma pré-visualização do resultado final do crop, além de armazenar as variáveis para envio e processamento no servidor.

function exibePreview( c )
{
    // c.x, c.y, c.x2, c.y2, c.w, c.h
};

A função recebe o array c, aquele com as dimensões e coordenadas do crop. Os valores do array são:

w largura (width) do crop h altura (height) do crop x1 e x2 posições horizontais do crop na imagem y1 e y2 posições verticais do crop na imagem Note que é aí que termina o trabalho do jCrop. Os valores devem ser processados no PHP. No nosso exemplo, conforme mencionei anteriormente, a função exibePreview vai registrar as posições em inputs do tipo hidden no formulário de envio.

function exibePreview( c )
{
    // campos hidden que armazenam os valores
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#x2').val(c.x2);
    $('#y2').val(c.y2);
    $('#w').val(c.w);
    $('#h').val(c.h);
};

Além disso ela deve atualizar a pré-visualização da imagem recortada. Pra isso vamos precisar do tamanho original da imagem. Se você está usando o mesmo formato de imagem, basta utilizar os mesmos valores sempre. No nosso caso, como a imagem é enviada via formulário, utilizamos a função getimagesize do php para retornar a largura (índice 0 do array de retorno) e a altura (índice 1). Elas são necessárias para calcular o posicionamento do crop. A idéia é criar um div com as dimensões do crop, mascarando a imagem original.

function exibePreview(c)
{
    var rx = 100 / c.w;
    var ry = 100 / c.h;

    // atualiza CSS do preview para refletir o tamanho da imagem enviada 
    // e o posicionamento do crop
    $('#preview').css({
        width: Math.round(rx * <?php echo $imagesize[0]; ?>) + 'px',
        height: Math.round(ry * <?php echo $imagesize[1]; ?>) + 'px',
        marginLeft: '-' + Math.round(rx * c.x) + 'px',
        marginTop: '-' + Math.round(ry * c.y) + 'px'
    });

    // campos hidden que armazenam os valores
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#x2').val(c.x2);
    $('#y2').val(c.y2);
    $('#w').val(c.w);
    $('#h').val(c.h);
}

Com a função exibePreview completa, podemos agora atualizar nossa chamada do jCrop:

$('#jcrop').Jcrop({
    onChange: exibePreview,
    onSelect: exibePreview,
    aspectRatio: 1
});

Note a propriedade aspectRatio, utilizada para amarrar largura e altura do crop, mantendo a proporção.

Tudo OK no frontend. Abaixo você confere o código do formulário de envio e o script para processamento da imagem pós-envio (validação e redimensionamento para evitar arquivos gigantes no crop).

<form name="frm-jcrop" id="frm-jcrop" method="post" action="index.php" enctype="multipart/form-data">
    <p>
        <label>Envie uma imagem:</label>
        <input type="file" name="imagem" id="imagem" />
        <input type="submit" value="Enviar" />
    </p>
</form>
// processa arquivo
$imagem     = isset( $_FILES['imagem'] ) ? $_FILES['imagem'] : NULL;
$img        = '';
// verifica se arquivo foi enviado para o servidor
if( $imagem['tmp_name'] )
{
    // move arquivo para o servidor
    if( move_uploaded_file( $imagem['tmp_name'], $imagem['name'] ) )
    {
        include( 'm2brimagem.class.php' );
        $oImg = new m2brimagem( $imagem['name'] );
        if( $oImg->valida() == 'OK' )
        {
            // redimensiona imagem para evitar arquivos grandes
            $oImg->redimensiona( '400', '', '' );
            $oImg->grava( $imagem['name'] );
            // retorna dimensões da imagem e configura variáveis para o jCrop
            $imagesize  = getimagesize( $imagem['name'] );
            $img        = '<img src="'.$imagem['name'].'" id="jcrop" '.$imagesize[3].' />';
            $preview    = '<img src="'.$imagem['name'].'" id="preview" '.$imagesize[3].' />';
        }
        else
        {
            // imagem inválida, exclui do servidor
            unlink( $imagem['name'] );
        }
    }
}

Está quase pronto. Temos um formulário para envio da imagem, e todo o javascript que vai processar o crop e atualizar o nosso preview. Falta o código PHP que vai de fato recortar a imagem enviada. Para isso utilizaremos a classe m2brimagem (leia mais sobre ela aqui).

O processamento será feito via AJAX/post, apenas para agilizar o retorno ao usuário, mas nada impede você de fazer o crop em um novo envio do formulário.

$('#btn-crop').click(function(){
    $.post( 'crop.php', {
        img:img, 
        x: $('#x').val(), 
        y: $('#y').val(), 
        w: $('#w').val(), 
        h: $('#h').val()
    }, function(){
        $('#div-jcrop').html( '<img src="'+img+'?'+Math.random()+'" width ="'+$('#w').val()+'" height ="'+$('#h').val()+'" />' );
    });
    return false;
});

Uma vez processado, nosso formulário exibirá uma nova tela, com a opção de recortar e salvar um pedaço da imagem enviada. No exemplo você pode observar que, além da imagem e da interface para crop, exibimos também duas janelas adicionais: o preview, já comentado anteriormente; e um pequeno debug, exibindo as informações e coordenadas em tempo real (tudo isso atualizado via exibePreview).

Ao clicar no botão salvar, o usuário executa, via AJAX, o script abaixo, mais uma vez utilizando a classe m2brimagem para o processamento. O script recebe como parâmetro o ponto inicial X e Y do crop, além da largura e altura do mesmo, e cria a versão recortada da imagem original. Após a execução, nosso elemento img é atualizado. Como nesse caso a imagem final possui o mesmo nome da imagem original, utilizamos o “?” com um número randômico (Math.random()) para evitar cache (essa dica é bem legal para sistemas com upload de imagens).

if( $_SERVER['REQUEST_METHOD'] == 'POST' )
{
    include( 'm2brimagem.class.php' );
    $oImg = new m2brimagem( $_POST['img'] );
    if( $oImg->valida() == 'OK' )
    {
        $oImg->posicaoCrop( $_POST['x'], $_POST['y'] );
        $oImg->redimensiona( $_POST['w'], $_POST['h'], 'crop' );
        $oImg->grava( $_POST['img'] );
    }
}
exit;

Outras opções Talvez tudo pareça um pouco confuso olhando os códigos assim de forma separada. Baixe os exemplos que você vai entender melhor. No site do plugin você encontra a documentação completa, em inglês, além de outros exemplos. Uma opção que utilizo bastante é especificar largura e altura fixas. Quando o usuário faz o upload de um avatar, por exemplo, vale a pena limitar o tamanho no jCrop (ou então fazer alguma coisa proporcional). As propriedades minSize e maxSize delimitam a área mínima e máxima do crop.

$('#jcrop').Jcrop({
    onChange: exibePreview,
    onSelect: exibePreview,
    minSize     : [ 200, 200 ], 
    maxSize     : [ 200, 200 ],
    allowResize : false,
    addClass    : 'custom'
});

No exemplo acima o crop vai ter sempre 200×200 pixels de dimensão. Além disso configuramos a propriedade allowResize com false, para evitar o redimensionamento da seleção. Outra propriedade legal é a addClass, para definir um estilo personalizado na seleção. No exemplo abaixo a linha fica com uma borda sólida ao invés do pontilhado.

.custom .jcrop-vline, .custom .jcrop-hline {
    background: #FF3366;
}

Fonte da resposta tutorial

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .