Dada una imagen y la tarea es obtener el ancho y alto de la imagen usando JavaScript. La propiedad ancho y alto se utiliza para mostrar el ancho y alto de la imagen.
Sintaxis para el ancho:
var width = this.width;
Sintaxis para la altura:
var height = this.height;
Ejemplo 1: este ejemplo selecciona la imagen y luego usa el método this.width y this.height para obtener el ancho y el alto de la imagen.
<!DOCTYPE html>
<html>
<head>
<title>
Get the real width and height of
an image using JavaScript
</title>
</head>
<body style="text-align:center;">
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h2 style="color:purple;">
Getting the real width and height of an image
</h2>
<script>
function CheckImageSize() {
var image = document.getElementById("Image").files[0];
createReader(image, function(w, h) {
alert("Width is: " + w +
"pixels, Height is: " + h + "pixels");
});
}
function createReader(file, whenReady) {
var reader = new FileReader;
reader.onload = function(evt) {
var image = new Image();
image.onload = function(evt) {
var width = this.width;
var height = this.height;
if (whenReady) whenReady(width, height);
};
image.src = evt.target.result;
};
reader.readAsDataURL(file);
}
</script>
<input type="file" id="Image" />
<input type="button" value="Find the dimensions"
onclick="CheckImageSize()"/>
</body>
<html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: Este ejemplo muestra la dimensión de una imagen. Mostrará el resultado sin utilizar la función de alerta. Aquí mostraremos el resultado en la misma ventana.
<!DOCTYPE html>
<html>
<head>
<title>
Get the real width and height of
an image using JavaScript
</title>
</head>
<body style="text-align:center;">
<img id="myImg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190613121627/download9.png">
<p>
Click the button to display the width
and height of the image
</p>
<button onclick="myFunction()">Try it</button>
<p>The width of the image in pixels:</p>
<p id="geeks"></p>
<p>The height of the image in pixels:</p>
<p id="gfg"></p>
<script>
function myFunction() {
var x = document.getElementById("myImg").width;
var y = document.getElementById("myImg").height;
document.getElementById("geeks").innerHTML = x;
document.getElementById("gfg").innerHTML = y;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón.
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por SohomPramanick y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA