Estoy tratando de ejecutar funciones después de un evento onloadend para agregar la imagen cargada a un lienzo y realizar un procesamiento posterior.
let fileInput = document.getElementById('fileinput'); fileInput.addEventListener('change', function(ev) { if(ev.target.files) { let file = ev.target.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function (e) { var image = new Image(); image.src = e.target.result; image.onload = function(ev) { function one(){ // some code here... } function two(){ // some code here... } // etc.. } } } });Cómo puedo hacer eso ?
Tu código funciona. Está ejecutando con éxito el código en el evento onloadend, pero su código simplemente declara dos funciones. No los ejecuta. He incluido algunos console.log s para ilustrar mi punto.
let fileInput = document.getElementById('fileinput'); fileInput.addEventListener('change', function(ev) { console.log('change event fired'); if(ev.target.files) { let file = ev.target.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function (e) { console.log('loadEnd event fired'); var image = new Image(); function one() { console.log('image.load event fired'); const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.drawImage(image,0,0); }; image.onload = one; image.src = e.target.result; } } }); <form> <input type=file id=fileinput /> </form> <canvas id=canvas width=300 height=300></canvas>