15

Preciso de uma função na qual a pessoa deve fazer o upload de uma imagem, sendo que ela deve "cortar a imagem", deixando no tamanho certo, estilo Facebook e depois deve ser salva no bando de dados. Testei vários plugins prontos, mas não consegui fazer do jeito que eu quero em nenhum deles.

Alguém conhece um plugin simples e que faça isso? E se possível um exemplo de código.

Darei mais detalhes: o plugin que deu mais certo dos que eu tentei foi esse:https://github.com/hongkhanh/cropbox, eu consigo cortar a imagem do jeito que eu quero, mas não consigo escrever novamente no input file para ser enviado para o PHP.

Pelo que eu entendi, o plugin converte o endereco da imagem que escolhi para uma base64 no formato data:image/png;base64..... para exibição na tela. Depois seria necessário eu alterar o valor do input para o endereço dessa nova imagem. Mas não estou conseguindo fazer isso.

Será que existe uma outra solução?

11
  • 2
    Boa questão, útil e acredito que vai ajudar muita gente que tem o mesmo problema. +1 e fav para acompanhar
    – Tiago P.C
    Commented 21/01/2016 às 16:27
  • Upload por php com crop eu nunca fiz, mas já fiz com resize, caso não tiver movimentação eu publico uma resposta Commented 21/01/2016 às 16:33
  • 1
    Estou pensando em responder a pergunta. Numa operação de crop, você precisa do plugin (que vai apenas gerar as coordenadas da imagem, ele não vai cortar nada dela "de verdade"). Daí, você manda essas informações para o php e processa com imagens do GD. Minha explicação seria um pouco complexa. Estás preparado? Commented 22/01/2016 às 12:06
  • 1
    @Lollipop pergunta reaberta
    – Math
    Commented 22/01/2016 às 12:14

1 Resposta 1

18

Vamos lá, vamos lá. Pode ser que a explicação seja longa.

Pontos a esclarecer

Quando você utiliza um crop via Javascript/jQuery, você não está cortando a imagem propriamente dita. Você está apenas salvando as coordenadas, em relação a imagem que aplicou as configurações usando o plugin de crop, para poder fazer o crop com outra ferramenta. É ai que entra o PHP.

Entendi do que o javascript não faz crop? Então também está entendido que você não vai salvar a imagem cropada no input file para depois fazer o upload.

Então o que vou fazer?

Você na verdade vai fazer o upload da imagem original, enviando juntamente com elas as coordenadas, através da submissão do formulário - vamos utilizar o método POST no exemplo.

Como fazer o crop

O crop, como dito, é assim:

  • O javascript capturando as coordendas, salvando em algum lugar (no caso os inputs hidden do formulário). Essas coordenadas são largura e altura do crop, e posição x e y do crop.

  • O Formulário envia as informações para o PHP.

  • O PHP pega as informações (as coordenadas do crop) e processa a imagem do upload, com essas informações, para poder criar a imagem cropada.

*Entendeu isso também? Então vamos para a próxima etapa

O CROP

Enfim, chegamos aqui. É hora de botar a mão na massa. Vou passar as informações necessárias para criar o nosso crop:

Requirimentos * Vamos usar a biblioteca fengyuanchen/cropper. todos os arquivos que vamos usar está nessa pasta do github copper/dist.

  • O cropper acima depende do jQuery, no nosso caso de uso.

  • Instalar a biblioteca php Gregwar/Image. Ela é excelente. Você pode instalá-la via composer ou então clonar o repositório. No nosso exemplo, eu vou usar o composer.

Estrutura

Montei a seguinte estrutura para o nosso teste.

crop.php - contém o código que vai realizar o crop da imagem.

index.php - contém o formulário php que enviará as informações para crop.php. Também nele carregamos os javascripts utilizados no teste.

default.js - O arquivo javascript que inicializa o plugin na imagem selecionada pelo nosso input file presente em index.php.

outros arquivos js - Eles são os arquivos da pasta cropper/dist do github, além do jQuery, que vamos precisar. Então são eles: cropper.js, cropper.css, jquery.js.

O código

Esse é o código do index.php:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cropper</title>
  <link rel="stylesheet" href="cropper.css">
  <script src="jquery.js"></script>
  <script src="cropper.js"></script>
  <script src="default.js"></script>
  <style>
    .container {
      max-width: 960px;
    }
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1 class="page-header">Cropper with full crop box</h1>
    <div id="image-container">
    </div>

    <form method="post" action="crop.php" enctype="multipart/form-data">
        <input type="hidden" name="y" id="y" />
        <input type="hidden" name="x" id="x" />
        <input type="hidden" name="w" id="w" />
        <input type="hidden" name="h" id="h" />
        <input type="file" name="image" id="image-file" />

        <button type="submit">Salvar</button>
    </form>
  </div>

  <!-- Scripts -->

</body>
</html>

Esse é o código o crop.php, que é onde o action do formulário fará a submissão dos dados.

Depois que o upload é concluído com sucesso, eu exibo a imagem cropada. Nesse arquivo nós incluímos o autoload do composer, para poder usar a classe Gregwar\Image\Image.

include __DIR__ . '/vendor/autoload.php';

use Gregwar\Image\Image;

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES['image']['tmp_name'])) {

    $tmp_name = $_FILES['image']['tmp_name'];

    $y = $_POST['y'];
    $x = $_POST['x'];
    $w = $_POST['w'];
    $h = $_POST['h'];

    $filename = sprintf('%s/croped/%s.jpg', __DIR__, uniqid());

    Image::open($tmp_name)
         ->crop($x, $y, $w, $h)
         ->save($filename, 'jpg');


    echo 'Imagem cropada com sucesso';

    printf('<img src="croped/%s" />', basename($filename));
}

Esse aqui é o arquivo responsável por inicializar e processar os dados do cropper. É o arquivo default.js.

$(function(){

    var $imageContainer = $('#image-container');

    $('#image-file').change(function () {

        var src = window.URL.createObjectURL(this.files[0]);

        var $image = $('<img/>');

        $image.attr({src: src}).load(function () {

            $imageContainer.html($image);       

            $image.cropper({
              aspectRatio: 16 / 9,
              crop: function (e) {

                $('#x').val(e.x);
                $('#y').val(e.y);
                $('#w').val(e.width);
                $('#h').val(e.height);
              }
            });
        })
    });
});

Explicação

Uso de Cropper.js Começamos primeiramente pelo plugin cropper. Nós temos nele a função crop, que é responsável por retornar os dados (como posição e tamanho do crop) cada vez que o usuário "arrastar" ou "redimensionar" o crop, como coordenadas da imagem.

Eu tenho 4 inputs hidden na index.php. Esses inputs dei o nome de x, y, w e h.

Onde: X é a posição em relação a esquerda (o famoso left do css), e Y, a em relação a altura (a posição top da imagem).

W é a simplificação de width, que quer dizer largura. E h é height, que é a altura.

O uso de Gregwar

Essa é minha parte favorita, pois é o PHP orientado a objetos salvando minha vida.

Aqui nó chamamos a classe Image do namespace Gregwar\Image:

 use Gregwar\Image\Image;

O método Image::open é responsável por abrir a imagem. Nesse caso, eu preferi não salvar a imagem do upload e depois editá-la com o crop. Eu abri diretamente o arquivo temporário do upload feito.

Image::open($tmp_name)

O método Image::crop é responsável por cortar a imagem nas coordenadas que desejamos. Lembra que eu falei que o javascript só envia as coordenadas? Então é hora de pegarmos essas coordenadas, que estarão disponíveis na variável $_POST.

$y = $_POST['y'];
$x = $_POST['x'];
$w = $_POST['w'];
$h = $_POST['h'];

Observe a ordem que os argumentos são passados, é importante não confundir, para o crop não sair errado.

  Image::open($tmp_name)
        ->crop($x, $y, $w, $h)

E por fim, salvamos a imagem. Com a função uniqid gero um nome aleatório. Escolhi que a extensão ia ser jpg. O diretório de salvamento é croped.

Então o nome gerado é esse:

$filename = sprintf('%s/croped/%s.jpg', __DIR__, uniqid());

A saída será algo parecido com isso:

c:\windows\php\crop\croped\24af43676.jpg

Então finalmente invocamos o método save. Nesse método, o primeiro argumento você tem que passar o nome do arquivo. O segundo é o formato que você vai salvar a imagem. Eu usei jpg.

O segundo argumento é muito útil. É uma forma de você enviar qualquer imagem via upload, mas todas serão convertidas para a extensão que você desejar.

   Image::open($tmp_name)
     ->crop($x, $y, $w, $h)
     ->save($filename, 'jpg');

Github com o exemplo

Apenas faça o clone do seguinte repositório para realizar os testes:

https://github.com/wallacemaxters/exemplo-php-crop

Nota: Não precisa utilizar o composer, se clonar meu exemplo do github.

Faça bom proveito!

Atualização

Fui alertado pelo usuário @Bacco para reformular a minha afirmação de que o javascript não faz o crop.

Na verdade, a maioria dos plugins, aos quais eu trabalhei para fazer um crop de imagens, o meio que eles utilizavam para fazer o crop era exatamente como dito anteriormente: Não era feito o crop, mas apenas enviada o upload da imagem juntamente com as coordenadas.

Porém, o @Bacco me lembrou que é possível fazer um crop de uma determinada imagem e mandar o corte feito para um canvas. Após isso, capturamos a imagem do canvas e mandamos para o servidor. Geralmente usa-se o base64 para efetuar essa operação.

O ponto importante de acrescentar esse último detalhe à resposta é que fazendo dessa forma (que o @Bacco falou) você pode diminuir o uso da banda do servidor, já que você não vai upar a imagem inteira para depois cortá-la pelo php. Você estará enviando o base64 da imagem já cortada, para, então, somente salvá-la.

5
  • 2
    PHPLegends é uma organização criada por mim e pelo @GuilhermeNascimento :) Commented 22/01/2016 às 14:04
  • perfeito, eu agradeço o tuto! Commented 5/03/2017 às 20:27
  • saberia informar o porque desse erro? Uncaught Error: Class 'Gregwar\Image\Image' not found in Commented 10/11/2018 às 15:23
  • Você instalou via as dependências via composer? Commented 10/11/2018 às 15:34
  • eu só copiei e colei o codigo via ftp Commented 10/11/2018 às 22:18

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 .