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.