JS에서 이미지의 원래 너비와 높이를 얻는 방법-HTML 지식-php.cn

집

일일 프로그램

HTML 지식

JS에서 이미지의 원래 너비와 높이를 얻는 방법

藏色散人

Dec 14, 2018 pm 04:13 PM

JS는 이미지의 원래 크기인 이미지의 원래 너비와 높이를 가져옵니다. HTML5 naturalWidth 및 naturalHeight 속성을 통해 이미지의 원래 크기를 얻을 수 있습니다. 이미지의 원래 너비와 높이는 HTML5 이미지 naturalWidth 및 naturalHeight 속성을 사용하여 쉽게 찾을 수 있습니다.

추천 참조: "JavaScriptTutorial"

JS에서 이미지의 원래 너비와 높이를 얻는 방법

그래서 앞쪽 기사에서는 이미지의 현재 너비와 높이를 얻는 JS 방법 을 소개했습니다. 실제로 필요한 친구는 원래 너비와 높이를 얻는 방법과 유사합니다. 먼저 참조할 수 있습니다.

아래에서는 특정 코드 예제를 계속 결합하여 원본 이미지 크기를 얻는 js 방법을 소개합니다.

코드 예시는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>js获取图片原始宽高的示例</title>
    <script type="text/javascript">
 function imgSize(){
            var myImg = document.querySelector("#sky");
            var realWidth = myImg.naturalWidth;
            var realHeight = myImg.naturalHeight;
            alert("原始 width=" + realWidth + ", " + "原始 height=" + realHeight);
 }
    </script>
</head>
<body>
<img src="./1/png" id="sky" style=" width:250px;" >
<p><button type="button" onclick="imgSize();">获取</button></p>
</body>
</html>

로그인 후 복사

이미지의 현재 너비와 높이를 가져오는 clientWidth 및 clientHeight 속성과 다르며, 이미지의 원래 크기를 가져오는 것은 다음과 같습니다. 주로 naturalWidth 및 naturalHeight 속성을 통해 가능합니다. 이 두 속성으로 얻은 이미지의 원래 너비와 높이는 외부 너비 및 높이 속성 설정의 변경으로 인해 변경되지 않습니다.

여기서 사용하는 이미지의 원래 너비와 높이는 다음과 같습니다. 716x565px; 위의 js 코드를 사용하여 이미지의 원래 크기를 얻으면 다음과 같습니다.

JS에서 이미지의 원래 너비와 높이를 얻는 방법

참고: querySelector() 메서드는 문서와 일치하는 지정된 CSS를 반환합니다. 선택기의 요소입니다. querySelector() 메서드는 지정된 선택기와 일치하는 첫 번째 요소만 반환합니다. 모든 요소를 반환해야 하는 경우 대신 querySelectorAll() 메서드를 사용하세요.

이 글은 이미지의 원래 너비와 높이를 얻는 js 방법에 관한 것입니다. 이 글도 매우 간단해서 필요한 친구들에게 도움이 되기를 바랍니다.

위 내용은 JS에서 이미지의 원래 너비와 높이를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.