Encontré una forma que me sirvió, pero tiene un detalle al utilizarlo en teléfonos, es necesario intentarlo siempre dos veces y en PC con una basta. Creo entender que por memoria o algo por el estilo.
Lo que hace la libreria cropper.js es reducir una foto que pesa en mi caso como 3 megas a 50 kb.
El tema es que no se como hacer que funcione a la primera(en teléfonos) y no en dos intentos.
Deje el código implementados, solo saque la ruta completa a mi servidor.
Documentación:
https://fengyuanchen.github.io/cropperjs/
Muchas gracias.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subir imagen</title>
<link rel="stylesheet" href="minifotos/bootstrap.min.css"/>
<link href="cropper.css" rel="stylesheet" type="text/css"/>
</head>
<style type="text/css">
img {
display: block;
max-width: 80%;
}
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
</style>
<body>
<br><br>
<br><br>
<div class="container">
<h5>Subida de Imagenes</h5>
<form method="post">
<input type="file" name="image" class="image">
</form>
</div>
<div class="modal" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Imagen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-4">
<!-- default image where we will set the src via jquery-->
<img id="image">
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" id="crop">Seleccionado</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="minifotos/jquery-3.5.1.min.js"></script>
<script src="minifotos/bootstrap.min.js"></script>
<script src="minifotos/cropper.js" type="text/javascript"></script>
<script>
var bs_modal = $('#modal');
var image = document.getElementById('image');
var cropper,reader,file;
$("body").on("change", ".image", function(e) {
var files = e.target.files;
var done = function(url) {
image.src = url;
bs_modal.modal('show');
};
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function(e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
bs_modal.on('shown.bs.modal', function() {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function() {
cropper.destroy();
cropper = null;
});
$("#crop").click(function() {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas.toBlob(function(blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
$.ajax({
type: "POST",
dataType: "json",
url: "upload.php",
data: {image: base64data},
success: function(data) {
bs_modal.modal('hide');
alert("Imagen Subida");
window.location.href = "MISITIO";
}
});
};
});
});
</script>
</body>
</html>