Javascript를 사용하여 이미지의 원래 너비와 높이를 얻는 방법에 대한 자세한 설명

머리말

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 중국어 웹사이트의 관련 기사를 참고하세요!