Gibt es eine Möglichkeit, die "naturalWidth" eines Bildes mit jquery auszulesen?

Question

Ich habe versucht, mit so etwas wie folgt aus:

var Height = $(this).naturalHeight; 

Aber es funktioniert nicht. Gibt es eine Möglichkeit zu tun, dass

greez

Answer 1

$this.css('height', 'auto'); 
var height = $this.height(); 

Answer 2

Das Beste, was Sie tun können, ist ein Bild zu verbergen, ohne die Breite und Höhe einstellen und die Bildquelle für dieses Bild als Originalbild. Dann berechne die Dimension dieses versteckten Bildes.

Oder Sie können die physische Dimension auf der Serverseite berechnen und diese an ein ausgeblendetes Element auf der Seite übergeben und die Größe von diesem verborgenen Elementwert abrufen.

Answer 3

Eine Möglichkeit, die Dimensionen eines Bildes zu erhalten, ist dynamisch eine Kopie des Bildes laden mit Hilfe von Javascript und erhalten es Dimensionen ist:

// preload the image 
var height, width = ''; 
var img = new Image(); 
var imgSrc = '/path/to/image.jpg'; 

$(img).load(function() { 
    alert('height: ' + img.height); 
    alert('width: ' + img.width); 
    // garbage collect img 
    delete img; 
}).error(function() { 
    // image couldnt be loaded 
    alert('An error occurred and your image could not be loaded. Please try again.'); 
}).attr({ src: imgSrc }); 

Answer 4

Es ist wie die akzeptierte Lösung sieht für mich ändert das Aussehen des Objekts . Gelegentlich ist jQuery ein wenig zu hilfreich und du musst es ihm sagen, um dir aus dem Weg zu gehen. Wenn Sie "naturalWidth" oder "naturalHeight" verwenden möchten, verwenden Sie einfach das bereits vorhandene, indem Sie das jQuery-Objekt in eine native Browserelementreferenz konvertieren.

var Height = document.getElementById($(this).attr("id")).naturalHeight; 

Answer 5

versuchen würde, nur

var width = $("img", this).css('width', 'auto').width(); 
var height= $("img", this).css('height', 'auto').height(); 

ist im Grunde die Berechnung für naturalWidth und naturalHeight ohnehin

Answer 6

Hier ein Beispiel einer jQuery-Funktion ist, die älteren Versionen IE arbeitet an auch für große Bilder.

/* 
* NaturalWith calculation function. It has to be async, because sometimes(e.g. for IE) it needs to wait for already cached image to load. 
* @param onNaturalWidthDefined callback(img) to be notified when naturalWidth is determined. 
*/ 
jQuery.fn.calculateNaturalWidth = function(onNaturalWidthDefined) { 
    var img = this[0]; 
    var naturalWidth = img.naturalWidth; 
    if (naturalWidth) { 
     onNaturalWidthDefined(img); 
    } else { //No naturalWidth attribute in IE<9 - calculate it manually. 
     var newImg = new Image(); 
     newImg.src = img.src; 
     //Wait for image to load 
     if (newImg.complete) { 
      img.naturalWidth = newImg.width; 
      onNaturalWidthDefined(img); 
     } else { 
      $(newImg).load(function() {img.naturalWidth=newImg.width; onNaturalWidthDefined(img)}); 
     } 
    } 
}; 

Die Verwendung ist einfach:

$(img).calculateNaturalWidth(function(img) { alert(img.naturalWidth)}); 

Answer 7

Quelle Von HERE

Hier eine kurze jQuery ist (jede Version) Plugin, das zwei Methoden ergänzt: naturalWidth() und naturalHeight(). Es verwendet Verzweigung, um zu bestimmen, ob NaturalWidth und NaturalHeight vom Browser unterstützt werden. Wenn die Methode unterstützt wird, wird sie nur zu einem Getter für die Eigenschaft "naturalWidth" oder "naturalHeight". Wenn sie nicht unterstützt wird, erstellt die Methode ein neues unstyled Bildelement und gibt die tatsächliche Breite und Höhe dieses Elements zurück.

// adds .naturalWidth() and .naturalHeight() methods to jQuery 
    // for retreaving a normalized naturalWidth and naturalHeight. 
    (function($){ 
    var 
    props = ['Width', 'Height'], 
    prop; 

    while (prop = props.pop()) { 
    (function (natural, prop) { 
     $.fn[natural] = (natural in new Image()) ? 
     function() { 
     return this[0][natural]; 
     } : 
     function() { 
     var 
     node = this[0], 
     img, 
     value; 

     if (node.tagName.toLowerCase() === 'img') { 
     img = new Image(); 
     img.src = node.src, 
     value = img[prop]; 
     } 
     return value; 
     }; 
    }('natural' + prop, prop.toLowerCase())); 
    } 
    }(jQuery)); 

    // Example usage: 
    var 
    nWidth = $('img#example').naturalWidth(), 
    nHeight = $('img#example').naturalHeight(); 

Answer 8

Ich benutze die native Javascript

Attribute

.naturalWidth/.naturalHeight

Auf einem jQuery-Objekt verwenden i

var width = $(this).get(0).naturalWidth; 
var height = $(this).get(0).naturalHeight; 

oder

var width = $("selector").get(0).naturalWidth; 
var height = $("selector").get(0).naturalHeight; 

Wenn kein jQuery-Objekt ausgewählt ist.

With get(0) on a jQuery object you can access the associated DOM-element. Auf dem nativen DOM-Element können Sie mit nativem JavaScript-Code arbeiten (hier greifen Sie auf das nativ Javascript-Attribut .naturalWidth zu)