[javascript] JavaScript로 이미지의 실제 너비와 높이를 얻으시겠습니까? (Safari / Chrome에서)

JAVASCRIPT / 글쓴이

jQuery 플러그인을 작성 중입니다.

Safari에서 Javascript로 실제 이미지 너비와 높이를 얻으려면 어떻게합니까?

다음은 Firefox 3, IE7 및 Opera 9에서 작동합니다.

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width");
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

그러나 Safari 및 Google Chrome과 같은 웹킷 브라우저 값은 0입니다.

답변

웹킷 브라우저는 이미지가로드 된 후 height 및 width 속성을 설정합니다. 시간 초과를 사용하는 대신 이미지의 onload 이벤트를 사용하는 것이 좋습니다. 다음은 간단한 예입니다.

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

CSS가 이미지의 크기에 미치는 영향을 피하기 위해 위의 코드는 이미지의 메모리 사본을 만듭니다. 이것은 FDisk가 제안한 매우 영리한 솔루션 입니다.

naturalHeight및 naturalWidthHTML5 속성을 사용할 수도 있습니다 .

답변

사용 naturalHeightHTML5 and naturalWidth속성을 .

예를 들면 다음과 같습니다.

var h = document.querySelector('img').naturalHeight;

IE9 +, Chrome, Firefox, Safari 및 Opera ( 통계 )에서 작동합니다.

답변


function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;
}

이미지 또는 이미지 치수 속성에서 스타일을 제거 할 필요는 없습니다. 자바 스크립트로 요소를 만들고 생성 된 객체 너비를 얻으십시오.

답변

근본적인 문제는 WebKit 브라우저 (Safari 및 Chrome)가 JavaScript 및 CSS 정보를 병렬로로드한다는 것입니다. 따라서 CSS의 스타일 효과가 계산되기 전에 JavaScript가 실행되어 잘못된 답변을 반환 할 수 있습니다. jQuery에서 해결책은 document.readyState == ‘complete’가 될 때까지 기다리는 것입니다.

jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  }
  ... (rest of function)

너비와 높이가 먼 한 … 수행중인 작업에 따라 테두리 및 패딩과 같은 오프셋 너비와 오프셋 높이가 필요할 수 있습니다.

답변

onloadWebKit 캐시에서 이미지가로드 된 경우 이벤트가 발생하지 않는 문제에 대해 허용되는 답변에 대해 많은 토론이 있습니다.

필자의 경우 onload캐시 된 이미지에 대해 발생하지만 높이와 너비는 여전히 0입니다. 간단한 setTimeout문제가 해결되었습니다.

$("img").one("load", function(){
    var img = this;
    setTimeout(function(){
        // do something based on img.width and/or img.height
    }, 0);
});

onload캐시에서 이미지가로드 된 경우에도 이벤트가 발생 하는 이유에 대해 말할 수 없습니다 (jQuery 1.4 / 1.5의 개선?). 그래도이 문제가 계속 발생하면 내 대답과var src = img.src; img.src = ""; img.src = src; 기술 이 작업.

(나의 목적으로 이미지의 속성이나 CSS 스타일에서 미리 정의 된 치수에 대해서는 신경 쓰지 않지만 Xavi의 답변에 따라 치수를 제거하거나 이미지를 복제 할 수 있습니다.)

답변

이것은 window.onload이벤트 내에서 발사하여 나를 위해 작동합니다 (사파리 3.2) .

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width");
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});

답변

DOM을 전혀 망칠 필요없이 프로그래밍 방식으로 이미지를 얻고 자바 스크립트를 사용하여 치수를 확인할 수 있습니다.

var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';