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.