Boa tarde eu tenho este código que faz com faça upload de uma imagem e depois possa arrastar, fazer zoom da mesma. Com o arrastar da imagem escolho que parte que cortar.
De seguida ao clicar num botao "Guardar" ele guarda a parte que está dentro da div.
Código (PHP):
De seguida ao clicar num botao "Guardar" ele guarda a parte que está dentro da div.
Código (PHP):
<?php
if(isset($_POST['cropar'])){
//guardar imagem dentro da div
}
?>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Crop Image</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="css/exemplo.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<link type="text/css" media="screen" rel="stylesheet" href="jquery.crop.css">
<style type="text/css">
body {
font-family : sans-serif;
font-size : 13px;
}
.results {
font-family : monospace;
font-size : 20px;
}
.cropFrame {
border : 4px solid black;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.crop.js"></script>
<script type="text/javascript" defer>
$( function () {
$( '.crop' ).each( function () {
var image = $( this )
, results = image.next( '.results' )
, x = $( '.cropX', results )
, y = $( '.cropY', results )
, w = $( '.cropW', results )
, h = $( '.cropH', results )
, crop = image
.crop( {
width : 400
, height : 300
, loading : 'Hello World'
} )
.on( 'crop', function( event ) {
x.text( event.cropX );
y.text( event.cropY );
w.text( event.cropW );
h.text( event.cropH );
} )
.data( 'crop' );
image
//.on( 'dblclick', $.proxy( crop.zoomIn, crop ) )
.on( 'mousewheel', function ( event ) {
return event.originalEvent.wheelDelta < 0 ?
crop.zoomIn() :
crop.zoomOut();
} );
} );
} );
</script>
</head>
<body>
<?php
// memory limit (nem todo server aceita)
ini_set("memory_limit","50M");
set_time_limit(0);
// processa arquivo
$imagem = isset( $_FILES['imagem'] ) ? $_FILES['imagem'] : NULL;
$tem_crop = false;
$img = '';
if( $imagem['tmp_name'] )
{
$imagesize = getimagesize( $imagem['tmp_name'] );
if( $imagesize !== false )
{
if( move_uploaded_file( $imagem['tmp_name'], $imagem['name'] ) )
{
include( 'm2brimagem.class.php' );
$oImg = new m2brimagem( $imagem['name'] );
if( $oImg->valida() == 'OK' )
{
$imagesize = getimagesize( $imagem['name'] );
$img = '<img src="'.$imagem['name'].'" id="jcrop" '.$imagesize[3].' class="crop" />';
$tem_crop = true;
}
}
}
}
?>
<?php if( $tem_crop === true ): ?>
<h2 id="tit-jcrop">Recorte a imagem</h2>
<div id="div-jcrop">
<form action="" method="post" style="border:1px solid #000;">
<?php echo $img; ?>
<input type="submit" value="Salvar" name="cropar" id="btn-crop" />
<input type="hidden" id="codigoImagem" name="codigoImagem"/>
</form>
</div>
<script type="text/javascript">
var img = '<?php echo $imagem['name']; ?>';
$(function(){
$('#jcrop').Jcrop({
onchange: exibePreview,
onselect: exibePreview,
aspectRatio: 1
});
$('#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()+'" />' );
$('#debug').hide();
$('#tit-jcrop').html('Feito!<br /><a href="crop-simples.php">enviar outra imagem</a>');
});
return false;
});
});
</script>
<?php else: ?>
<form name="frm-jcrop" id="frm-jcrop" method="post" action="crop-simples.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>
<?php endif; ?>
</body>
</html>
if(isset($_POST['cropar'])){
//guardar imagem dentro da div
}
?>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Crop Image</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="css/exemplo.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<link type="text/css" media="screen" rel="stylesheet" href="jquery.crop.css">
<style type="text/css">
body {
font-family : sans-serif;
font-size : 13px;
}
.results {
font-family : monospace;
font-size : 20px;
}
.cropFrame {
border : 4px solid black;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.crop.js"></script>
<script type="text/javascript" defer>
$( function () {
$( '.crop' ).each( function () {
var image = $( this )
, results = image.next( '.results' )
, x = $( '.cropX', results )
, y = $( '.cropY', results )
, w = $( '.cropW', results )
, h = $( '.cropH', results )
, crop = image
.crop( {
width : 400
, height : 300
, loading : 'Hello World'
} )
.on( 'crop', function( event ) {
x.text( event.cropX );
y.text( event.cropY );
w.text( event.cropW );
h.text( event.cropH );
} )
.data( 'crop' );
image
//.on( 'dblclick', $.proxy( crop.zoomIn, crop ) )
.on( 'mousewheel', function ( event ) {
return event.originalEvent.wheelDelta < 0 ?
crop.zoomIn() :
crop.zoomOut();
} );
} );
} );
</script>
</head>
<body>
<?php
// memory limit (nem todo server aceita)
ini_set("memory_limit","50M");
set_time_limit(0);
// processa arquivo
$imagem = isset( $_FILES['imagem'] ) ? $_FILES['imagem'] : NULL;
$tem_crop = false;
$img = '';
if( $imagem['tmp_name'] )
{
$imagesize = getimagesize( $imagem['tmp_name'] );
if( $imagesize !== false )
{
if( move_uploaded_file( $imagem['tmp_name'], $imagem['name'] ) )
{
include( 'm2brimagem.class.php' );
$oImg = new m2brimagem( $imagem['name'] );
if( $oImg->valida() == 'OK' )
{
$imagesize = getimagesize( $imagem['name'] );
$img = '<img src="'.$imagem['name'].'" id="jcrop" '.$imagesize[3].' class="crop" />';
$tem_crop = true;
}
}
}
}
?>
<?php if( $tem_crop === true ): ?>
<h2 id="tit-jcrop">Recorte a imagem</h2>
<div id="div-jcrop">
<form action="" method="post" style="border:1px solid #000;">
<?php echo $img; ?>
<input type="submit" value="Salvar" name="cropar" id="btn-crop" />
<input type="hidden" id="codigoImagem" name="codigoImagem"/>
</form>
</div>
<script type="text/javascript">
var img = '<?php echo $imagem['name']; ?>';
$(function(){
$('#jcrop').Jcrop({
onchange: exibePreview,
onselect: exibePreview,
aspectRatio: 1
});
$('#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()+'" />' );
$('#debug').hide();
$('#tit-jcrop').html('Feito!<br /><a href="crop-simples.php">enviar outra imagem</a>');
});
return false;
});
});
</script>
<?php else: ?>
<form name="frm-jcrop" id="frm-jcrop" method="post" action="crop-simples.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>
<?php endif; ?>
</body>
</html>