머리말
Javascript를 사용하여 이미지의 원래 너비와 높이를 얻는 방법은 인터넷에 많이 있습니다. 이 기사에서는 이 문제에 대해 다시 설명할 것이며 이는 일부 사람들에게 도움이 될 수 있습니다.
페이지의
img 요소에 대한 자세한 설명 너비를 예로 들면, 가장 먼저 떠오르는 것은 innerWidth 속성입니다. jQuery 메소드의 요소 또는 width().
은
<img id="img" src="1.jpg" alt="Javascript를 사용하여 이미지의 원래 너비와 높이를 얻는 방법에 대한 자세한 설명" > <script type="text/javascript"> var img = document.getElementById("img"); console.log(img.innerWidth); // 600 </script>
이렇게 하면 이미지 크기 정도는 얻을 수 있을 것 같습니다.
그런데 예를 들어 img 요소에 width 속성을 추가하면 이미지의 실제 너비는 600이고 너비는 400으로 설정됩니다. 이때 innerWidth는 600이 아닌 400입니다. 분명히, 이미지의 원래 크기를 얻기 위해 innerWidth를 사용하는 것은 신뢰할 수 없습니다.
innerWidth 속성은 이미지의 원래 너비가 아닌 요소 상자 모델의 실제 렌더링된 너비를 가져오기 때문입니다.
<img id="img" src="1.jpg" style="max-width:90%" alt="Javascript를 사용하여 이미지의 원래 너비와 높이를 얻는 방법에 대한 자세한 설명" > <script type="text/javascript"> var img = document.getElementById("img"); console.log(img.innerWidth); // 400 </script>
jQuery의 width() 메서드는 최하위 수준에서 innerWidth 속성을 호출하므로 width() 메서드로 얻은 너비는 이미지의 원래 너비가 아닙니다.
그럼 img 요소의 원래 너비를 얻는 방법은 무엇입니까?
naturalWidth/naturalHeight
HTML5는 이미지의 원래 너비와 높이를 직접 얻을 수 있는 새로운 속성 naturalWidth/naturalHeight를 제공합니다. 이 두 가지 속성은 Firefox/Chrome/Safari/Opera 및 IE9에서 구현되었습니다.
은 다음과 같습니다.
var naturalWidth = document.getElementById('img').naturalWidth, naturalHeight = document.getElementById('img').naturalHeight;
주요 브라우저의 naturalWidth / naturalHeight 호환성은 다음과 같습니다.
따라서 IE8과의 호환성을 고려하지 않는다면 naturalWidth / naturalHeight 속성을 사용해도 안전합니다.
IE7/8의 호환성 구현:
IE8 및 이전 버전의 브라우저는 naturalWidth 및 naturalHeight 속성을 지원하지 않습니다.
IE7/8에서는 다음과 같이 new Image()를 사용하여 이미지의 원래 크기를 얻을 수 있습니다.
function getNaturalSize (Domlement) { var img = new Image(); img.src = DomElement.src; return { width: img.width, height: img.height }; } // 使用 var natural = getNaturalSize (document.getElementById('img')), natureWidth = natural.width, natureHeight = natural.height;
IE7+ 브라우저는 모두 호환 가능 기능 캡슐화 :
function getNaturalSize (Domlement) { var natureSize = {}; if(window.naturalWidth && window.naturalHeight) { natureSize.width = Domlement.naturalWidth; natureSizeheight = Domlement.naturalHeight; } else { var img = new Image(); img.src = DomElement.src; natureSize.width = img.width; natureSizeheight = img.height; } return natureSize; } // 使用 var natural = getNaturalSize (document.getElementById('img')), natureWidth = natural.width, natureHeight = natural.height;
요약
위 내용은 모두의 공부나 업무에 도움이 되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨서 소통할 수 있습니다.
Javascript를 사용하여 이미지의 원본 너비와 높이를 얻는 방법에 대한 자세한 설명은 PHP 중국어 웹사이트의 관련 기사를 참고하세요!