jquery로 이미지의 "naturalWidth"를 읽을 수있는 방법이 있습니까?

Question

는이 같은 뭔가 시도 :

var Height = $(this).naturalHeight; 

그러나 그것은 작동하지 않습니다.

당신이 할 수있는 최선은 폭과 높이를 설정하지 않고 이미지를 숨기고 원래의 이미지로,이 이미지의 이미지 소스를 사용하는 것입니다

Answer 1

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

Answer 2

을 greez 것을 할 수있는 방법이 있습니까. 그런 다음이 숨겨진 이미지의 크기를 계산하십시오.

그렇지 않으면 서버 측의 물리적 치수를 계산하여 페이지의 숨겨진 요소로 전달하고 숨겨진 요소 값에서 크기를 가져올 수 있습니다. 그것은 허용 솔루션처럼 나에게 보이는

// 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 3

한 가지 방법은 동적으로 자바 스크립트를 사용하여 이미지의 사본을로드하고 치수를의 얻는 것입니다 . 가끔 jQuery는 약간 도움이되며 길을 벗어나기 위해 말해야합니다. naturalWidth 또는 naturalHeight를 사용하려면 jQuery 객체를 기본 브라우저 요소 참조로 변환하여 이미 존재하는 것을 사용하십시오.

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

Answer 4

객체의 모양을 수정 : 이미지의 크기를 얻을 수

Answer 5

은

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

어쨌든 여기

Answer 6

에도 큰 이미지 오래된 IE 버전에서 작동하는 jQuery를 함수의 예입니다 기본적으로 naturalWidth 및 naturalHeight의 계산이다 노력할 것이다.

/* 
* 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)}); 
     } 
    } 
}; 

사용은 간단 HERE

가입일

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

Answer 7

소스 여기서 짧은 jQuery를 (어떤 버전의) 두 가지 방법을 추가 플러그인 : naturalWidth() 및 naturalHeight는(). naturalWidth 및 naturalHeight가 브라우저에서 지원되는지 여부를 결정하기 위해 분기를 사용합니다. 지원되고있는 경우,이 메서드는 naturalWidth 또는 naturalHeight 속성의 getter가됩니다. 지원되지 않는 경우이 메서드는 스타일이 지정되지 않은 이미지 요소를 새로 만들고 해당 요소의 실제 너비와 높이를 반환합니다.

// 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

나는 내가

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

또는

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

사용 JQuery와 객체에

.naturalWidth/.naturalHeight

속성 자바 스크립트 기본을 사용

jQuery 객체가 선택되지 않은 경우.

With get(0) on a jQuery object you can access the associated DOM-element. 기본 DOM 요소에서 네이티브 javascript 코드 (여기 nativ javascript 특성 .naturalWidth에 액세스)