WebKit 브라우저에서 이미지 크기를 어떻게 정확하게 얻을 수 있습니까?

Webkit 브라우저에서 이미지 크기를 정확하게 검색

Safari 및 Chrome과 같은 Webkit 브라우저에서는 이미지의 실제 크기를 측정하는 것이 어려울 수 있습니다. 인라인 너비 및 높이 속성을 제거하고 이미지의 실제 크기를 측정하는 것과 같은 전통적인 방법은 이미지가 로드된 후 이러한 브라우저 설정 크기를 고려하지 못합니다.

이미지의 온로드 이벤트 활용

시간 초과에 의존하는 대신 보다 안정적인 접근 방식은 이미지의 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.
    });

NaturalHeight 및 NaturalWidth 속성 활용

최신 브라우저는 HTML5 속성 naturalHeight 및 naturalWidth를 지원합니다. CSS에 관계없이 이미지의 실제 크기를 제공합니다. 이 접근 방식은 더욱 간결합니다.

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

이러한 기술을 활용하면 Webkit 브라우저에서 이미지의 실제 너비와 높이를 정확하게 검색할 수 있으므로 보다 정밀한 이미지 조작 및 표시가 가능합니다.

위 내용은 WebKit 브라우저에서 이미지 크기를 어떻게 정확하게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!