web-dev-qa-db-fra.com

Comment obtenir une hauteur et une largeur d'image réelles à l'aide de jQuery?

Sur une page, j'ai affiché 100 images dont les attributs de largeur et de hauteur ont été modifiés. L'identifiant de l'image est en boucle.

Comment puis-je obtenir la taille d'origine de l'image dans cette boucle?

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

Vous pouvez récupérer les dimensions d'origine d'une image en utilisant les propriétés naturalWidth et naturalHeight de l'objet dom. 

Par exemple. 

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

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

Avec jQuery, cela ressemblerait à: 

var image = $('#someImage');

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

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');

Ou juste le vérifier ici http://jsfiddle.net/Increazon/A5QJM/1/

20
Vova Popov

Le seul moyen d'obtenir la taille d'origine est de restaurer son état d'origine. Vous pouvez le faire assez facilement en clonant l'image, puis en supprimant les attributs height et width pour obtenir les valeurs réelles. Vous devez également insérer ensuite l'image modifiée dans la page, sinon elle n'aura pas une hauteur/largeur calculée. Vous pouvez le faire facilement dans un div hors écran. Voici un exemple:

http://jsbin.com/ocoto/edit

Le 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());

Le CSS:

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

Le HTML:

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

Je devais effectuer une tâche similaire avec un plugin jQuery que j'ai créé. Il conserve l'état pour une valeur de texte d'entrée, mais le principe pourrait facilement être utilisé pour votre largeur et votre hauteur.

Je créerais un objet personnalisé qui stocke l'ID, la largeur et la hauteur de l'objet d'origine. Cet objet est ensuite placé dans un tableau. Lorsque cela est nécessaire pour restaurer la valeur, il suffit de boucler le tableau d'objets personnalisés pour faire correspondre ID et bingo, un objet avec la largeur et la hauteur d'origine.

Vous pouvez consulter le code de mon plugin sur www.wduffy.co.uk/jLabel pour voir comment j'ai implémenté cela. En fonction du nombre d'images que vous modifiez, la matrice peut toutefois devenir un peu lourde.

Un exemple pourrait ressembler à

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;
};
1
WDuffy

Essaye celui-là:

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

});

0
softnayr