¿Cómo obtener el tamaño de la imagen (alto y ancho) usando JavaScript?

¿Hay alguna API o método de JavaScript o jQuery para obtener las dimensiones de una imagen en la página?

Puede obtener la imagen mediante programación y verificar las dimensiones con Javascript ...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Esto puede ser útil si la imagen no forma parte del marcado.

clientWidth y clientHeight son propiedades DOM que muestran el tamaño actual en el navegador de las dimensiones internas de un elemento DOM (excluyendo margen y borde). Entonces, en el caso de un elemento IMG, esto obtendrá las dimensiones reales de la imagen visible.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

Además (además de las respuestas de Rex e Ian) hay:

imageElement.naturalHeight

y

imageElement.naturalWidth

Estos proporcionan la altura y el ancho del archivo de imagen en sí (en lugar de solo el elemento de imagen).

Si está utilizando jQuery y solicita tamaños de imagen, debe esperar hasta que se carguen o solo obtendrá ceros.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

Creo que una actualización de estas respuestas es útil porque una de las respuestas mejor votadas sugiere usar clientWidthy clientHeight, que creo que ahora está obsoleto.

He realizado algunos experimentos con HTML5 para ver qué valores se devuelven realmente.

En primer lugar, utilicé un programa llamado Dash para obtener una visión general de la API de imagen. Establece que heighty widthson el alto / ancho renderizado de la imagen y eso naturalHeighty naturalWidthson el alto / ancho intrínseco de la imagen (y son solo HTML5).

Utilicé una imagen de una hermosa mariposa, de un archivo con altura 300 y ancho 400. Y este Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Luego usé este HTML, con CSS en línea para la altura y el ancho.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Resultados:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Luego cambié el HTML a lo siguiente:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

es decir, usar atributos de alto y ancho en lugar de estilos en línea

Resultados:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

Luego cambié el HTML a lo siguiente:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

es decir, usando ambos atributos y CSS, para ver cuál tiene prioridad.

Resultados:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Usando JQuery haces esto:

var imgWidth = $("#imgIDWhatever").width();

Lo que todos los demás han olvidado es que no puede verificar el tamaño de la imagen antes de que se cargue. Cuando el autor verifique todos los métodos publicados, funcionará probablemente solo en localhost. Como jQuery podría usarse aquí, recuerde que el evento 'listo' se dispara antes de cargar las imágenes. $ ('# xxx'). width () y .height () deben activarse en el evento onload o posterior

Realmente solo puede hacer esto utilizando una devolución de llamada del evento de carga, ya que el tamaño de la imagen no se conoce hasta que realmente haya terminado de cargarse. Algo así como el código a continuación ...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

Con la biblioteca jQuery

Uso .width()y .height().

Más en jQuery ancho y jQuery heigth .

Código de ejemplo

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>

ok chicos, creo que mejoré el código fuente para poder dejar que la imagen se cargue antes de intentar averiguar sus propiedades, de lo contrario, mostrará '0 * 0', porque la siguiente instrucción se habría llamado antes de que se cargara el archivo el navegador. Requiere jquery ...

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

Asumiendo, queremos obtener dimensiones de imagen de <img id="an-img" src"...">

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

Dimensiones naturales

el.naturalWidthy el.naturalHeightnos dará las dimensiones naturales , las dimensiones del archivo de imagen.

Dimensiones de diseño

el.offsetWidthy el.offsetHeightnos dará las dimensiones en las que se representa el elemento en el documento.

Antes de usar el tamaño de imagen real, debe cargar la imagen de origen. Si usa el marco JQuery, puede obtener un tamaño de imagen real de manera simple.

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

Esta respuesta fue exactamente lo que estaba buscando (en jQuery):

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

Puede tener una función simple como la siguiente ( imageDimensions()) si no teme usar promesas .

// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
    const img = new Image()

    // the following handler will fire after the successful parsing of the image
    img.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = img
        resolve({ width, height })
    }

    // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
    img.onerror = () => {
        reject('There was some problem with the image.')
    }
    
    img.src = URL.createObjectURL(file)
})

// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
    const [file] = files
 
    try {
        const dimensions = await imageDimensions(file)
        console.info(dimensions)
    } catch(error) {
        console.error(error)
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>

Respuesta de JQuery:

$height = $('#image_id').height();
$width  = $('#image_id').width();

Pensé que esto podría ser útil para algunos que usan Javascript y / o Typecript en 2019.

Descubrí que lo siguiente, como algunos han sugerido, es incorrecto:

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

Esto es correcto:

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

Conclusión:

Uso img, no this, en onloadfunción.

Recientemente tuve el mismo problema por un error en el control deslizante flexible. La altura de la primera imagen se estableció más pequeña debido al retraso de carga. Intenté el siguiente método para resolver ese problema y funcionó.

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

Esto le dará la altura con respecto al ancho que configuró en lugar del ancho original o cero.

También puedes usar:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

Nicky De Maeyer preguntó después de una foto de fondo; Simplemente lo obtengo del css y reemplazo el "url ()":

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

Puede aplicar la propiedad del controlador de carga cuando la página se carga en js o jquery de esta manera: -

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

Simplemente, puedes probar así.

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

Es importante eliminar la configuración interpretada por el navegador del div principal. Entonces, si desea el ancho y la altura de la imagen real, puede usar

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

Este es un ejemplo de proyecto TYPO3 de mí donde necesito las propiedades reales de la imagen para escalarla con la relación correcta.

var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

Este es mi método, espero que sea útil. :)

function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

esto funciona para la vista previa y carga de múltiples imágenes. si tiene que seleccionar para cada una de las imágenes una por una. A continuación, copie y pegue en todas las funciones de imagen de vista previa y valide !!!

Antes de adquirir los atributos del elemento, la página del documento debe estar cargada:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

simplemente pase el objeto de archivo img que obtiene el elemento de entrada cuando seleccionamos el archivo correcto, dará la altura y el ancho de la imagen

function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}