javascript/jqueryで画像のフルサイズを取得

Question

divに収まるようにサイズが変更されたページ上の画像、たとえば400x300があります。 jQueryでイメージの全サイズ（〜4000x3000）を取得するにはどうすればよいですか？ .width（）と.height（）は画像の現在のサイズを返すように見えます。

Answer 1

画像は、画像の実際の、非改変の幅と高さを含んでいnaturalWidthとnaturalHeight性質を持っているの本当の大きさ、すなわちそのイメージは、CSSがそれを設定するものではありません。

$('#idOfMyimg').on('load', function() { 
    var height = this.naturalHeight, 
     width = this.naturalWidth; 
}); 

は別のオプションは、ソースと同じファイルを使用して新しいイメージを作成し、それから寸法を取得することですけれども

一つはまだ限り、ロードするために画像を待たなければならないだろうそれがDOMに追加されたことがないですが、外部のないスタイルは...見なかったこと

var img = new Image(); 

img.onload = function() { 
    var height = this.height, 
     width = this.width; 
} 
img.src = $('#idOfMyimg').attr('src'); 

FIDDLE

Answer 2

あなたが好き同じソースファイルを保持Imageオブジェクトでこれを行うことができます。

VAR PIC = $（ "IMG"）

//必要性：これを試してみてください

var preloader = new Image(); 
preloader.src = 'path/to/my/file.jpg'; 

preloader.onload = function(){ 
var height = preloader.height; 
var width = preloader.width; 
} 

Answer 3

をimg-elementが幅と高さを設定している場合にこれらを削除する pic.removeAttr（ "width"）; pic.removeAttr（ "height"）;

var pic_real_width = pic.width（）; var pic_real_height = pic.height（）;

Answer 4

イメージを複製し、高さと幅の属性を削除し、本文に追加して幅とサイズを取得してから削除することができます。

jsFiddleデモはここにある：http://jsfiddle.net/58dA2/

コード：

$(function() { 
    var img = $('#kitteh'); // image selector 
    var hiddenImg = img.clone().css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('body'); 
    $('#height').text(hiddenImg.height()); 
    $('#width').text(hiddenImg.width()); 
    hiddenImg.remove();    
});​