Breaking

Post Top Ad

Your Ad Spot

lunes, 18 de marzo de 2019

Cómo obtener las dimensiones originales de la imagen (ancho y alto) usando JavaScript

Cuando trabaje con las dimensiones de la imagen, siempre se recomienda obtener el ancho y alto real de la imagen. Las propiedades naturalWidth y naturalHeight proporcionan una manera fácil de recuperar las dimensiones originales de la imagen mediante JavaScript. Puede obtener fácilmente el tamaño original (ancho y alto) de la imagen usando JavaScript.
naturalWidth
Suponga que tiene una imagen que originalmente tiene un ancho de 250px y que la hace de 550px de ancho por estilo CSS o propiedad HTML de "ancho". El naturalWidth devolverá el ancho original 250, aunque el ancho de la pantalla es 550.
naturalHeight
Suponga que tiene una imagen que originalmente es de 100px de alto y la hace de 250px de alto por estilo CSS o propiedad HTML de "altura". El naturalHeight devolverá la altura original 100, aunque la altura de visualización es 250.
< img  src = "codexworld.png"  id = "image"  width = "500px" />
// imagen HTML DOM 
var image = documento .getElementById ( 'imagen' );

// ancho original de la imagen 
var originalWidth = image.naturalWidth;

// altura original de la imagen 
var originalHeight = image.naturalHeight;
Obtenga las dimensiones de la imagen real haciendo clic en el botón
El siguiente fragmento de código muestra cómo puede obtener el tamaño original (ancho y alto) de la imagen usando JavaScript.
< img  src = "codexworld.png"  id = "image"  width = "500px" />

< button  onclick = "getOriginalSize ()" > Get Dimensions </ button >
función  getOriginalSize () {  
     var image = document .getElementById ( 'image' );
    
    var originalWidth = image.naturalWidth; 
    var originalHeight = image.naturalHeight;
    
    alerta ( "Ancho original =" + Ancho original + "," + "Altura original =" + Altura original);
}

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas