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>