WebKit 브라우저에서 실제 이미지 크기를 정확하게 얻는 방법은 무엇입니까?

WebKit 브라우저에서 실제 이미지 크기 검색

다음과 같은 WebKit 브라우저에서 JavaScript를 사용하여 이미지의 실제 너비와 높이를 확인하려고 시도 Safari 또는 Chrome에서는 값이 0인 경우가 많습니다. 이는 WebKit이 이미지가 완전히 로드된 후에만 이러한 속성을 업데이트하기 때문입니다.

이 제한을 극복하려면 시간 초과 대신 이미지의 onload 이벤트를 활용하는 것이 좋습니다. 이 접근 방식을 사용하면 실제 크기를 더 정확하게 검색할 수 있습니다.

var img = $("img")[0]; // Retrieve the image element
var pic_real_width, pic_real_height;

$("<img/>") // Create an in-memory copy to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width; // Note: $(this).width() won't work for in-memory images.
        pic_real_height = this.height;
    });

이 기술을 사용하면 CSS 스타일의 간섭 없이 실제 이미지 크기를 검색할 수 있습니다.

또 다른 옵션은 HTML5 속성 naturalHeight 및 naturalWidth. 이러한 속성은 CSS 조작과 상관없이 이미지의 스타일이 지정되지 않은 고유한 크기를 제공합니다.

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

이러한 메서드를 구현하면 Safari 및 Chrome과 같은 WebKit 브라우저에서 이미지의 실제 크기에 정확하게 액세스할 수 있습니다.

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