Foros del Web » Programando para Internet » Javascript »

reducir peso de foto del lado del cliente

Estas en el tema de reducir peso de foto del lado del cliente en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/09/2021, 18:36
Avatar de mveraa  
Fecha de Ingreso: diciembre-2002
Ubicación: santiago-chilito
Mensajes: 1.931
Antigüedad: 19 años, 5 meses
Puntos: 2
reducir peso de foto del lado del cliente

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>
__________________
"Cuando se adelanta un oponente, enfréntalo y salúdalo; si intenta retroceder, déjalo seguir su camino"
  #2 (permalink)  
Antiguo 09/09/2021, 07:45
Avatar de mveraa  
Fecha de Ingreso: diciembre-2002
Ubicación: santiago-chilito
Mensajes: 1.931
Antigüedad: 19 años, 5 meses
Puntos: 2
Respuesta: reducir peso de foto del lado del cliente

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.
__________________
"Cuando se adelanta un oponente, enfréntalo y salúdalo; si intenta retroceder, déjalo seguir su camino"
  #3 (permalink)  
Antiguo 25/09/2021, 16:55
Avatar de mveraa  
Fecha de Ingreso: diciembre-2002
Ubicación: santiago-chilito
Mensajes: 1.931
Antigüedad: 19 años, 5 meses
Puntos: 2
Respuesta: reducir peso de foto del lado del cliente

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>
__________________
"Cuando se adelanta un oponente, enfréntalo y salúdalo; si intenta retroceder, déjalo seguir su camino"

Etiquetas: cliente, file, foto, input, lado, peso, reducir, type
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:46.