Ottieni altezza/larghezza dell'immagine in Javascript (idealmente senza caricare affatto l'immagine)

Question

Scusa se è già stata data una risposta, ma non riesco a trovarla se è così.

Voglio trovare l'altezza e la larghezza di un file immagine in Javascript. In realtà non ho bisogno di mostrare l'immagine nella pagina, solo l'altezza e la larghezza.

Al momento ho il seguente codice, ma restituisce altezza e larghezza 0 (in 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); 

Il file sicuramente esiste, è nella stessa directory del codice HTML, e non ha altezza e larghezza 0 :)

Che cosa sto facendo di sbagliato?

Answer 1

Se l'immagine non viene caricata, non avrà l'altezza e la larghezza impostate. Devi aspettare fino a quando l'immagine è completamente carica, quindi ispezionare la sua 'dimensione. Forse qualcosa lungo queste linee:

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

L'altezza e width di un elemento di immagine (come le proprietà offsetHeight e offsetWidth di ogni elemento), ritorno 0 invece dei valori attuali fino a che non è stato aggiunto a qualche documento (e se il suo attributo style.display non è impostato su "none").
Un modo comune per aggirare questo problema è visualizzare l'immagine all'esterno dell'area visibile della pagina; i tuoi utenti non lo vedranno, e le sue proprietà di altezza e larghezza restituiranno i valori effettivi invece di 0. Quindi dovresti rimuovere l'immagine dal 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

Se si seleziona questo collegamento, ecco un metodo per ottenere tutte le dimensioni dell'immagine in una directory con PHP che la controlla senza doverla caricare nella pagina. Questo potrebbe aiutarti. È possibile passare ai tuoi js con un

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

PHP Get dimensions of images in dir

Penso che questo sia un approccio migliore, se davvero non si vuole caricare le immagini

Answer 4

Il seguente codice si arriva al larghezza/altezza senza aspettare che l'immagine si carichi completamente, rendendola notevolmente più veloce rispetto alle altre soluzioni qui.

Per testare la modifica di abc123 nell'origine immagine su qualsiasi stringa casuale per impedire la memorizzazione nella cache.

C'è anche uno 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>