0
I need to save a cropped image and I’m not getting it, when I save the image is in original size
<?php
include '../../../lib/autoload.php';
if(isset($_FILES['item_foto'])){
$formatoPermitido = array("png", "jpeg", "jpg", "gif");
$ext = pathinfo($_FILES['item_foto']['name'], PATHINFO_EXTENSION);
if (in_array($ext, $formatoPermitido)){
$diretorio = 'img/';
$temporario = $_FILES['item_foto']['tmp_name'];
$novoNome = uniqid().".$ext";
//echo ($novoNome);
move_uploaded_file($temporario, $diretorio.$novoNome);
}
}
?>
<html>
<head>
<title>Recortando imagem</title>
<script src="jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="croppie.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="croppie.css" />
</head>
<body>
<div class="container">
<br />
<h3 align="center">Preparando a foto!</h3>
<br />
<br />
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body" align="center">
<form action="" method="post" enctype="multipart/form-data">
<img type="image" name="deusllene_2" style="width: 50px">
<input type="file" name="item_foto" id="item_foto" accept="image/*" />
<div class="col-md-4" id="carvalho" style="width:350px; margin-top:30px"></div>
<button type="submit" name="up">envair</button>
</form>
<br />
<div id="store_image"></div>
</div>
</div>
</div>
</body>
</html>
<div id="insertimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Posicione sua imagem</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
<!--<input type="file" name="insert_image" id="gmc" accept="image/*" />-->
</div>
<div class="col-md-4" style="padding-top:30px;">
<br />
<br />
<br />
<button class="btn btn-success crop_image">Recortar a imagem</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width: 183,
height: 230,
type: 'square' //
},
boundary: {
width: 300,
height: 300
}
});
$('#item_foto').on('change', function() {
var reader = new FileReader();
reader.onload = function(event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function() {
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#insertimageModal').modal('show');
});
$('.crop_image').click(function(event) {
$( '#deusllene' ).remove();
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response) {
var formData = response;
$('#insertimageModal').modal('hide');
$( "#carvalho" ).append('<img type="image" name="deusllene" src='+response+' alt="Girl in a jacket">')
formData.readAsDataURL(this.files[0]);
});
});
});
</script>
<script>