reducir peso de una imagen.

[mveraa]

hola quiero enviar una foto desde un teléfono a un servidor.
El problema que tengo es que los teléfonos sacan fotos de mucho pero. Encontré un ejemplo que vía java script reduce el peso del mismo.



Para lo cual ya tengo un formulario que envía la foto, pero con el consiguiente problema de tamaño.


<form id="mapa2020" enctype="multipart/form-data" method="post" name="mapa2020" action="upload2.php?t">

<li class="list-group-item">

<input type="hidden" id="mapa2020FileUpload1ControlName" value="FileUpload3228157609703615182739" name="FileUpload1">
<label for="mapa2020FileUpload1FileControl" style="">Foto</label>
<input type="file" id="mapa2020FileUpload1FileControl" onchange="process()" class="btn btn-info" name="FileUpload1_File">
</li>

<li class="list-group-item">

<input type="submit" id="mapa2020Button_Update" class="btn btn-success" alt="Enviar" value="Enviar" name="Button_Update">
<input type="submit" id="mapa2020Button_Delete" class="Button" alt="Borrar" value="Borrar" name="Button_Delete"></td>
</li>
</ul>




Este código que encontré baja el peso de la foto:


function process()
{
//var count = document.getElementById('mapa2020FileUpload1Contro lName').files.length;

const file = document.getElementById('mapa2020FileUpload1FileCo ntrol').files[0];
//const file2 = document.getElementById('mapa2020FileUpload1Contro lName').files[0];

console.log("FILE1 :"+file);

fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
console.log("PESO: "+fileSize);

document.getElementById('details').innerHTML += 'FOTO: ' + file.name + '<br>Size: ' + fileSize + '<br>Type: ' + file.type;
document.getElementById('details').innerHTML += '<p>';

if (!file) return;

const reader = new FileReader();
reader.readAsDataURL(file);

reader.onload = function (event) {

const imgElement = document.createElement("img");
imgElement.src = event.target.result;
document.querySelector("#input").src = event.target.result;

//console.log("leyo: "+imgElement.src);

imgElement.onload = function (e) {
console.log("leyo:2");

const canvas = document.createElement("canvas");
const MAX_WIDTH = 400;

const scaleSize = MAX_WIDTH / e.target.width;
canvas.width = MAX_WIDTH;
canvas.height = e.target.height * scaleSize;

const ctx = canvas.getContext("2d");

ctx.drawImage(e.target, 0, 0, canvas.width, canvas.height);

const srcEncoded = ctx.canvas.toDataURL(e.target, "image/jpeg");

// you can send srcEncoded to the server
document.querySelector("#output").src = srcEncoded;


//get the resized image from src
var resized = document.querySelector('#output').src;



}


}

}


Como ya tengo el formulario listo y funcionando, mi idea es tomar la foto reducida y sobreescribirla por la imagen original(de gran peso), lo intente asi:

document.getElementById('mapa2020FileUpload1FileCo ntrol').files[0]=srcEncoded;

Pero no me funciona.

espero me puedan orientar.

grcs.

[mveraa]

hola. si bien esta relacionado con mi consulta anterior, no es lo mismo.

Independiente si alguien sabe como enviar la foto reducida de peso, pasa un fenómeno que no se como solucionarlo.

Utilizando el teléfono :

- ingreso al sitio que donde esta el formulario para cargar la foto.
- presiono el boton para adjuntar un documento y no es capaz de cargar la foto, dice que se
queda sin memoria.
- repito el procedimiento y funciona, ósea carga(la visualizo en la pantalla) la foto, todo esto antes
de presionar boton upload e enviar al servidor.

En resumen tengo que repetir dos veces el mismo procedimiento para poder cargar la foto.

Alguna idea de como solucionar esto.


muchas gracias.

[tuadmin]

en tus javascript
document.getElementById('mapa2020FileUpload1FileCo ntrol').files[0]=srcEncoded;
estas poniendo espacio en los getElementById
note las diferencias

Código Javascript:

document.getElementById('mapa2020FileUpload1FileCo ntrol').files[0]=srcEncoded;
 

Código Javascript:

document.getElementById('mapa2020FileUpload1FileControl').files[0]=srcEncoded;
 

[tuadmin]

primero tienes que quitar el envio del formulario a tu archivo PHP. solo deja el de javascript, y prueba si obtienes el reducido. las fotos del movil pueden llegar a pesar 500Mb dependiendo del movil. si tu javascript para reducirlo tiene que procesar los 500Mb. pues primero estara el Original y luego a eso le suamara la conversion con otros 500MB por asi decirlo. en total tu pagina consumira 1GB y el error de memoria insuficiente. no mencionas si es por el navegador o usas una app intermedia. o similar. o el mensaje viene de tu servidor

[mveraa]

muchas gracias por la observación , ojala sea eso .

[mveraa]

ok gracias por los comentario, hare las pruebas que me indicas.
La idea es solo utilizar navegador, el siguiente paso es ponerlo en una PWA.

Muchas gracias.

[mveraa]

hola puse el formulario de la forma mas simple posible. pero pasa el mismo efecto, para cargar una foto en el formulario y salga dentro del <img id="image">, tengo que hacerlo dos veces, al parecer es mucho el tamaño de la foto para manejarlo por navegador.

Si tiene alguna idea seria genial saber. grcs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Resize Images Before Upload</title>






</head>
<body>

Select a file: <input type="file" onchange='resize()' id="uploader">
<button onclick='resize()'>Resize</button>
<img id="image">

<script>

function resize(){
//define the width to resize e.g 600px
var resize_width =200;//without px

//get the image selected
var item = document.querySelector('#uploader').files[0];

//create a FileReader
var reader = new FileReader();

//image turned to base64-encoded Data URI.
reader.readAsDataURL(item);
reader.name = item.name;//get the image's name
reader.size = item.size; //get the image's size
reader.onload = function(event) {
var img = new Image();//create a image
img.src = event.target.result;//result is base64-encoded Data URI
img.name = event.target.name;//set name (optional)
img.size = event.target.size;//set size (optional)
img.onload = function(el) {
var elem = document.createElement('canvas');//create a canvas

//scale the image to 600 (width) and keep aspect ratio
var scaleFactor = resize_width / el.target.width;
elem.width = resize_width;
elem.height = el.target.height * scaleFactor;

//draw in canvas
var ctx = elem.getContext('2d');
ctx.drawImage(el.target, 0, 0, elem.width, elem.height);

//get the base64-encoded Data URI from the resize image
var srcEncoded = ctx.canvas.toDataURL(el.target, 'image/jpeg', 0);

//assign it to thumb src
document.querySelector('#image').src = srcEncoded;

/*Now you can send "srcEncoded" to the server and
convert it to a png o jpg. Also can send
"el.target.name" that is the file's name.*/

//get the resized image from src
var resized = document.querySelector('#image').src;

//note: remember that the image is now base64-encoded Data URI

//sendind the image to the server (php)
var fd = new FormData();
fd.append("image", resized);

//sending data to the server
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function()
{
console.log("everything is ok:"+xhr.readyState+" : "+JSON.parse(xhr.responseText));
//console.log(JSON.stringify(xhr.responseText));

if (xhr.readyState==4 && xhr.status==200)
{
var response = JSON.parse(xhr.responseText);

console.log("RESPUESTA:"+response);
if(response.success == true)
{
alert('The image was uploaded');
}
}
}
xhr.open("POST", "upload1975.php");
xhr.send(fd);




}
}
}



</script>
</body>
</html>




.

[tuadmin]

para poder ayudar vas a tener que enviar en que dispositivo te da problemas. tu telefono movil, que version de android, imagen de ejemplo el cual te da error. en este apartado

Código Javascript:

var srcEncoded = ctx.canvas.toDataURL(el.target, 'image/jpeg', 0);
 

creo deberias usar las BLOB de los navegadores modernos. por lo cual vas a tener que investigarlo y googlearlo.

todo eso lo digo por que tome lo que hiciste y lo probe y todo normal a la primera ya me muestra la imagen en las etiquetas IMG
probado en un PIXEL con android 11 firefox ,opera y chrome, ojo que cuando se sube la foto se ejecuta la funcion "resize()"

<input type="file" onchange='resize()' id="uploader">
y en el boton tambien ejecutas la misma funcion

<button onclick='resize()'>Resize</button>

[mveraa]

muchas gracias voy investigar lo que recomiendas.

ocupo un android v9, con navegador chrome.