Obtenga la altura/ancho de la imagen en Javascript (idealmente sin cargar la imagen)

Question

Lo siento si esto ya ha sido respondido, pero no puedo encontrarlo si es así.

Quiero encontrar el alto y el ancho de un archivo de imagen en Javascript. En realidad, no necesito mostrar la imagen en la página, solo la altura y el ancho.

Por el momento tengo el siguiente código, pero está devolviendo la altura y el ancho 0 (en Mozilla 5).

var img = new Image(); 
    img.src = "./filename.jpg"; 
    var imgHeight = img.height; 
    var imgWidth = img.width; 
    alert("image height = " + imgHeight + ", image width = " + imgWidth); 

El archivo sin duda existe, está en el mismo directorio que el HTML, y no tiene la altura y el ancho de 0 :)

¿Qué estoy haciendo mal?

Answer 1

Si la imagen no está cargada, no tendrá configurado su 'alto y ancho'. Tienes que esperar hasta que la imagen esté completamente cargada, luego inspecciona su tamaño. Tal vez algo en este sentido:

function getWidthAndHeight() { 
    alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size."); 
    return true; 
} 
function loadFailure() { 
    alert("'" + this.name + "' failed to load."); 
    return true; 
} 
var myImage = new Image(); 
myImage.name = "image.jpg"; 
myImage.onload = getWidthAndHeight; 
myImage.onerror = loadFailure; 
myImage.src = "image.jpg"; 

Answer 2

La altura y propiedades de ancho de un elemento de imagen (como las propiedades offsetHeight y offsetWidth de cualquier elemento), retorno 0 en lugar de los valores reales hasta que se ha añadido a algún documento (y si su atributo style.display no está establecido en "none").
Una forma común de evitar esto es mostrar la imagen fuera del área visible de su página; sus usuarios no lo verán, y sus propiedades de alto y ancho devolverán los valores reales en lugar de 0. Luego debe eliminar la imagen del documento.

var img = new Image(); 
img.src = "./filename.jpg"; 
img.style.position = "absolute"; 
img.style.left = -9999;    // Image width must not exceed 9999 pixels 
img.style.visibility = "hidden"; // Maybe you can remove this 
document.body.appendChild(img); 
var imgHeight = img.height; 
var imgWidth = img.width; 
alert("image height = " + imgHeight + ", image width = " + imgWidth); 
document.body.removeChild(img);  // Removes the image from the DOM (This does not destroy the image element) 

Answer 3

Si marca este enlace aquí hay un método para obtener todas las dimensiones de la imagen en un directorio con PHP que lo verifica sin tener que cargarlo en la página. Esto podría ayudarte. Se puede pasar a sus js con un

var dimensions = <?php echo json_encode($imageDimensions)?> 

PHP Get dimensions of images in dir

Creo que este es un enfoque mejor si realmente no desea cargar las imágenes

Answer 4

El siguiente código le dará el ancho/alto sin esperar a que la imagen se cargue por completo, por lo que es significativamente más rápido que las otras soluciones aquí.

Para las pruebas cambie abc123 en el origen de la imagen a cualquier cadena aleatoria para evitar el almacenamiento en caché.

También hay un JSFiddle Demo.

<div id="info"></div> 
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123"> 

<script> 
getImageSize($('#image'), function(width, height) { 
    $('#info').text(width + ',' + height); 
}); 

function getImageSize(img, callback) { 
    var $img = $(img); 

    var wait = setInterval(function() { 
     var w = $img[0].naturalWidth, 
      h = $img[0].naturalHeight; 
     if (w && h) { 
      clearInterval(wait); 
      callback.apply(this, [w, h]); 
     } 
    }, 30); 
} 
</script>