typescript - ¿Cómo puedo obtener el ancho y alto de un enlace de imagen en Angular?

Necesito validar un enlace de una imagen si tiene 1000px x 1000px y es jpg.

Ejemplo:

https://www.w3schools.com/bootstrap/paris.jpg

Tengo este enlace, necesito obtener el ancho y la altura de esta imagen.

Creo que el problema del jpg será fácil de hacer, daré una subcadena en los últimos caracteres, pero en cuanto a la cuestión del tamaño de la imagen, no tengo idea de cómo puedo encontrarlo en Angular.

¿Alguien tiene alguna idea? Gracias.

Respuesta #1

Aquí está la manera de JavaScript:

function getImageDimenstion(imgUrl){

   let img = new Image(); 

   img.src = imgUrl;
   img.onload = function (event) {
        let  loadedImage = event.currentTarget;
        let width = loadedImage.width;
        let height = loadedImage.height;
        console.log('height: '+height);
        console.log('width: '+width);
   } 
}

const url= "https://www.w3schools.com/bootstrap/paris.jpg";
getImageDimenstion(url);

ejemplo funcional para Angular :

Demostración en funcionamiento

Respuesta #2

Pensé en compartir mi solución a este problema ya que me quedé atascado al no poder acceder a la altura y ancho de la imagen fuera de la función de devolución de llamada que se daba en las soluciones de otros. Aquí está la solución que funcionó para mí:

let img = new Image();
img.src = "https://yourImageSource";

Ahora, si quieres usar la altura/ancho de la imagen, solo usa img.naturalHeight y img.naturalWidth.

NOTA: funciona en navegadores modernos en mi proyecto de Angular.