Estoy tratando de comprimir imágenes desde el lado del cliente antes de cargarlas en el servidor. Mi objetivo es capturar la imagen en una entrada de archivo, comprimirla y luego agregar la imagen comprimida como un valor en otro campo de entrada de archivo (ImageInput) que se enviará al servidor en un POST.

La imagen se está comprimiendo, pero la entrada ImageInput no obtiene el valor de la imagen. Publica una imagen vacía.

 <script> function process() { const file = document.querySelector("#upload").files[0]; if (!file) return; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (event) { const imgElement = document.createElement("img"); imgElement.src = event.target.result; imgElement.onload = function (e) { 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 alert(srcEncoded) document.querySelector("#output").src = srcEncoded; // my file input which I want to give a value of the compressed image document.getElementById('ImageInput').value = srcEncoded; }; }; } </script>