Come ottengo la larghezza e l'altezza dell'immagine effettiva usando jQuery?

Question

In una pagina sono state visualizzate 100 immagini, che hanno la larghezza e l'attributo altezza modificato. ID immagine è in un ciclo.

Come si ottiene la dimensione originale dell'immagine, all'interno di questo loop?

$(this).appendTo(".prod_image").attr('height',150).attr('width',150).attr('title','').attr('name','').attr('alt','').attr('id','id'+i); 

Answer 1

L'unico modo per ottenere la dimensione originale è ripristinarlo allo stato originale. Puoi farlo abbastanza facilmente clonando l'immagine, quindi rimuovendo gli attributi di altezza e larghezza per ottenere i valori reali. Devi anche inserire l'immagine modificata nella pagina altrimenti non avrà un'altezza/larghezza calcolate. Puoi farlo facilmente in un div esterno. Ecco un esempio:

http://jsbin.com/ocoto/edit

Il JS:

// Copy the image, and insert it in an offscreen DIV 
aimgcopy = $('#myimg').clone(); 
$('#store').append(aimgcopy); 

// Remove the height and width attributes 
aimgcopy.removeAttr('height'); 
aimgcopy.removeAttr('width'); 

// Now the image copy has its "original" height and width 
alert('Height: '+aimgcopy.height()+' Width: '+aimgcopy.width()); 

Il CSS:

#store { position: absolute; left: -5000px; } 

Il codice HTML:

<img id="myimg" src="http://sstatic.net/so/img/logo.png" width="300" height="120"/> 
    <div id="store"></div> 

Answer 2

ho dovuto eseguire un compito simile wi un plugin jQuery che ho creato. Mantiene lo stato per un valore di testo di input, ma il principio potrebbe essere facilmente utilizzato per la larghezza e l'altezza.

Vorrei creare un oggetto personalizzato che memorizza l'ID, la larghezza e l'altezza dell'oggetto originale. Questo oggetto viene quindi inserito in una matrice. Quando è necessario ripristinare il valore, è sufficiente eseguire il ciclo della matrice di oggetti personalizzati per abbinarli a ID e bingo, un oggetto con larghezza e altezza originali.

È possibile controllare il codice del mio plug-in a www.wduffy.co.uk/jLabel per vedere come l'ho implementato. A seconda di quante immagini si stanno modificando, la matrice potrebbe diventare un po 'troppo pesante.

Un esempio potrebbe essere simile

var states = new Array(); 

function state($obj) { 

    // Public Method: equals 
    this.equals = function($obj) { 
     return $obj.attr('id') == this.id; 
    }; 

    // Public Properties 
    this.id = $obj.attr('id'); 
    this.width = $obj.attr('width'); 
    this.height = $obj.attr('height'); 

}; 

function getState($obj) { 
    var state; 

    $.each(states, function() { 
     if (this.equals($obj)) { 
      state = this; 
      return false; // Stop the jQuery loop running 
     }; 
    }); 

    return state; 
}; 

Answer 3

HTML:

<img id="myimg" src="http://azart-cash.ru/big_pics/kazino_AzartPlay.png" 
    width="120" height="140"/> 

JavaScript:

var img = new Image(); 
img.onload = function() { 
    alert(this.width + 'x' + this.height); 
} 
img.src = $("#myimg").attr('src'); 

O semplicemente verificarlo qui http://jsfiddle.net/Increazon/A5QJM/1/

Answer 4

È possibile r Considera le dimensioni originali di un'immagine utilizzando le proprietà NaturalWidth e NaturalHeight dell'oggetto dom.

Es.

var image = document.getElementById('someImage'); 

var originalWidth = image.naturalWidth; 
var originalHeight = image.naturalHeight; 

Con jQuery sarebbe simile:

var image = $('#someImage'); 

var originalWidth = image[0].naturalWidth; 
var originalHeight = image[0].naturalHeight; 

Answer 5

provare questo:

$("<img>") 
      .attr("src", element.attr("src")) 
      .load(function(){ 
       MG.originalSize[0] = this.width; 
       MG.originalSize[1] = this.height; 

});