0
Hello guys I’m in a big dilemma. When I crop the image I can view <img src="*****">, but when I click save the image gets in original size!
At this location is where I need to recover the value assign in input file
<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>
The modal is opening normally
<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>
That’s my JS code
<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;
//alert(formData)
formData.src = canvas.toDataURL();
$('#insertimageModal').modal('hide');
$('#deusllene_2').attr("src", response)
$( "#carvalho" ).append('<img type="image" name="deusllene" src='+response+' alt="Girl in a jacket">')
$( "#item_foto" ).html(response);
});
});
});
</script>
The code even saves the image but is saving in original size.