WebKit 브라우저(Safari 및 Chrome)에서 이미지 크기를 정확하게 검색하는 방법은 무엇입니까?

Webkit 브라우저(Safari, Chrome)에서 정확한 이미지 크기 검색

Javascript 이미지 조작 영역에서 이미지의 실제 너비와 높이를 얻는 것은 어려울 수 있습니다. , 특히 Safari 및 Chrome과 같은 Webkit 브라우저에서 발생합니다.

문제 개요

Firefox 3, IE7 및 Opera 9에서 jQuery를 활용할 때 다음 코드 조각은 실제 이미지 크기를 효과적으로 추출합니다.

var pic = $("img");
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();

그러나 Webkit 브라우저에서는 이 접근 방식이 잘못된 결과를 낳습니다. 0의 값.

해결책: Javascript의 이미지 로딩 이벤트

해결책은 이미지 요소의 onload 이벤트를 활용하는 것입니다. 아래의 수정된 코드는 이를 수행합니다.

var img = $("img")[0]; // Get the image element

$("<img/>") // Make a virtual copy of the image to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

이미지의 메모리 복사본을 만들고 로드 이벤트 내에서 this 키워드를 활용하여 이미지 크기를 변경할 수 있는 잠재적인 CSS 효과를 우회합니다.

대안: HTML5 이미지 속성

HTML5 브라우저와의 호환성을 위해 naturalHeight 및 naturalWidth를 활용할 수도 있습니다. 속성:

var pic_real_width = img.naturalWidth;
var pic_real_height = img.naturalHeight;

위 내용은 WebKit 브라우저(Safari 및 Chrome)에서 이미지 크기를 정확하게 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!