reducir peso de foto del lado del cliente

mveraa · #1 (**permalink**) 08/09/2021, 18:36

hola estoy buscando alguna manera de bajar el paseo de una imagen antes de enviarla al servidor.

Encontre este codigo, pero como no me manejo a gran nivel en javascript y me gustaria una orientacion.

Lo dire con las palabras mas simples para no confundir.
-el formulario toma,guarda,etc una imagen X
-la manipula(reduce) y la muestra en un div seria como una imagen distinta. Y.
-pero al momento de subir al servidor veo que estoy subiendo X en vez de Y.

¿como podria subir Y, segun este ejemplo referencial? o
¿como podria cambiar Y por X,?

Espero se pueda entender.
muchas gracias.

CODI:

<div>
<input type="file" id="image-input" accept="image/*">
<img id="preview"></img>
</div>

<script>
let imgInput = document.getElementById('image-input');
imgInput.addEventListener('change', function (e) {

if (e.target.files) {
let imageFile = e.target.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("img");
img.onload = function (event) {
// Dynamically create a canvas element
var canvas = document.createElement("canvas");

// var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Actual resizing
ctx.drawImage(img, 0, 0, 300, 300);

// Show resized image in preview element
var dataurl = canvas.toDataURL(imageFile.type);
document.getElementById("preview").src = dataurl;
// console.log(dataurl);
}
img.src = e.target.result;

}
reader.readAsDataURL(imageFile);
}
});
</script>
</body>

mveraa · #2 (**permalink**) 09/09/2021, 07:45

creo entender que la imagen queda como asignada al siguiente campo.

<input type="file" id="image-input" accept="image/*">

existe alguna forma de modificar lo asignado. ?

Estoy tirando ideas, para ver si alguna es factibles.

grcs por la orientación.

mveraa · #3 (**permalink**) 25/09/2021, 16:55

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">

<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>