Estou tentando usar um plugin que achei neste vídeo, porém estou enfrentando o seguinte problema: gostaria de fazer upload de uma imagem e fazer um crop em 1747px de largura. Porém para dispositivos com largura menor que isto acaba explodindo como na imagem abaixo:
Alguém sabe como resolver isto? Código abaixo.
#uploadimageModal .modal-dialog {
max-width: 1920px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.js"></script>
<div class="container">
<br />
<h3 align="center">Image Crop & Upload using JQuery with PHP Ajax</h3>
<br />
<br />
<div class="panel panel-default">
<div class="panel-heading">Select Profile Image</div>
<div class="panel-body" align="center">
<input type="file" name="upload_image" id="upload_image" accept="image/*" />
<br />
<div id="uploaded_image"></div>
</div>
</div>
</div>
<div id="uploadimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Upload & Crop Image</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 text-center">
<div id="image_demo" style="margin-top:30px"></div>
</div>
<div class="col-12" style="padding-top:30px;">
<button class="btn btn-success crop_image">Crop & Upload Image</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:1747,
height:800,
type:'square' //circle
},
boundary:{
width:1847,
height:846
}
});
$('#upload_image').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]);
$('#uploadimageModal').modal('show');
});
$('.crop_image').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"upload.php",
type: "POST",
data:{"image": response},
success:function(data)
{
$('#uploadimageModal').modal('hide');
$('#uploaded_image').html(data);
}
});
})
});
});
</script>