Muitos sistemas precisam guardar as fotos de seus usuários. O problema é que o usuário final raramente terá uma foto nas dimensões adequadas (e mais dificilmente ainda ele abrirá a imagem disponível em um software grafico para dar um resize), de modo que é interessante oferecer a funcionalidade de crop na foto que subiu via upload. Crop significa recortar um pedaço da imagem.
Recentemente em um projeto tive que implementar essa função.
Segue os prints:
Step 1: O usuario seleciona uma foto qualquer em seu computador
Step 2: O usuário é redirecionado para a página de recorte (crop) da imagem que ele enviou
Step 3: O pedaço da imagem que ele recortou será usado para representá-lo no sistema.
Vamos ao código:
Primeiro vamos precisar de uma lib javascript que faz crop, tem várias.
A que eu escolhi é esta aqui:
http://uvumitools.com/crop.html
Pegue todos os arquivos e coloque em seu projeto
Crie uma página PHP com um formulário para o upload da imagem:
<form action="upload.php?user_id=2353" enctype="multipart/form-data" method="POST">
<input id="fileInput" name="arquivos" type="file" />
<input type="submit" value="Salvar Foto" />
</form>
Agora crie o arquivo upload.php que irá receber esse upload vindo do form:
$destino = 'C:\xampp\htdocs\site\uploads';//estou usando a pasta uploads para guardar os arquivos
if (!$_FILES) {
echo 'Nenhum arquivo enviado!';
} else {
$file_name = $_FILES['arquivos']['name'];
$file_type = $_FILES['arquivos']['type'];
$file_size = $_FILES['arquivos']['size'];
$file_tmp_name = $_FILES['arquivos']['tmp_name'];
$error = $_FILES['arquivos']['error'];
}
switch ($error) {
case 0:
break;
case 1:
echo 'Tamanho do arquivo ultrapassou o limite';
break;
case 2:
echo 'O tamanho do arquivo é maior do que o permitido!';
break;
case 3:
echo 'O upload não foi concluído!';
break;
case 4:
echo 'O upload não foi feito!';
break;
}
if ($error == 0) {
if (!is_uploaded_file($file_tmp_name)) {
echo 'Erro ao processar arquivo!';
} else {
//concateno o time no nome do arquivo para evitar sobrescrever arquivos de mesmo nome
$time = time();
if (!move_uploaded_file($file_tmp_name, $destino . "/" . $time.$file_name)) {
echo 'Não foi possível salvar o arquivo!';
} else {
//vai para o crop
require_once 'crop_editor.php';//carrega aqui a página que faz o crop
}
}
}
O arquivo crop_editor.php:
Certifique-se de que esses arquivos js e css estejam nos locais apropriados.
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/mootools-for-crop.js" type="text/javascript"> </script>
<script src="js/UvumiCrop-compressed.js" type="text/javascript"> </script>
<link href="css/uvumi-crop.css" media="screen" rel="stylesheet" type="text/css"></link>
<style type="text/css">
body,html{
background-color:#333;
margin:0;
padding:0;
font-family:Trebuchet MS, Helvetica, sans-serif;
}
hr{
margin:20px 0;
}
#main{
margin:5%;
position:relative;
overflow:auto;
color:#aaa;
padding:20px;
border:1px solid #888;
background-color:#000;
text-align:center;
}
#resize_coords{
width:50px;
}
#previewExample3{
margin:10px;
}
.yellowSelection{
border: 2px dotted #FFB82F;
}
.blueMask{
background-color:#00f;
cursor:pointer;
}
</style>
<script type="text/javascript">
exampleCropper1 = new uvumiCropper('imagem',{
coordinates:false,
preview:true,
downloadButton:false,
saveButton:true,
serverScriptSave:'crop_it.php', //aqui a pagina que recebe os parametros do crop
onCropSuccess:function(){
document.location = 'sucesso.php';
},
onCropFail:function(){
document.location = 'error.php';
},
mini:{
x:150,
y:150
},
parameters:{
usuario_id:'<?php echo $_REQUEST['user_id']?>'
}
});
</script>
</head>
<body>
<div>
<img alt="cropping test" id="imagem" src="uploads/?php echo $time . $file_name;?" />
</div>
<div id="saida">
</div>
</body>
</html>
Agora a página crop_it.php:
$h=$_REQUEST['height'];
$x=$_REQUEST['left'];
$y=$_REQUEST['top'];
$filename=$_REQUEST['filename'];
header('Content-type: image/jpg');
//header('Content-Disposition: attachment; filename='.$src);
$image = imagecreatefromjpeg('uploads/'.$filename);
$crop = imagecreatetruecolor($w,$h);
imagecopy ( $crop, $image, 0, 0, $x, $y, $w, $h );
imagejpeg($crop);
Pronto, aparecerá somente o pedaço escolhido.
Você pode fazer alterações nesse arquivo, como por exemplo salvar em disco o pedaço da imagem e associar o nome dessa nova imagem ao usuário no banco de dados. Repare que desde o formulário estou passando o id do usuario, você pode recuperá-lo aqui usando $_REQUEST['usuario_id'], ou pegar da sessão.
Espero que esse exemplo ajude.
atenciosamente,
Gustavo Marques.
