Estoy tratando de crear una función de vista previa de imagen muy simple que permita a los usuarios elegir un archivo de imagen local y mostrarlo en el navegador del cliente. Luego, quiero recuperar y mostrar la dimensión de la imagen (alto, ancho) y no puedo hacerlo.

Intento n.º 1 Después de llamar a readAsDataURL , intenté recuperar las dimensiones de la imagen inmediatamente, pero fallé porque la imagen no parece mostrarse en la pantalla antes de poder leer las dimensiones.

Intento n.º 2 Por lo tanto, intenté usar Promises para hacer que la secuencia de llamadas a funciones fuera sincrónica. Tenía la esperanza de leer las dimensiones de la imagen después de que se representa en la pantalla. Desafortunadamente, todavía no tiene éxito.

Cualquier ayuda será apreciada. Literalmente, puede copiar y pegar el código siguiente en un archivo HTML y ver cómo funciona. Gracias.

 <script> var loadFile = function(event) { var promise = fileReader(event.target.files[0]); promise.then( () => { var userUploadedImage = document.getElementById('userUploadedImage'); console.log('Image width:' + userUploadedImage.width); // problem: always appearing 0 console.log('Image height:' + userUploadedImage.height); // problem: appearing 0 } ); }; function fileReader(file){ return new Promise((resolve, reject) => { var reader = new FileReader(); reader.onload = function(){ var userUploadedImage = document.getElementById('userUploadedImage'); userUploadedImage.src = reader.result; }; reader.onerror = reject; reader.readAsDataURL(file); resolve(); }); } </script> <input type="file" accept="image/*" onchange="loadFile(event)"> <img id="userUploadedImage"/>