📖
자바스크립트 로 원격지 이미지 가로세로 사이즈 출력
페이지 정보
본문
자바스크립트를 사용하여 원격지 이미지를 로드한 후 해당 이미지의 가로와 세로 크기를 확인할 수 있습니다.
이를 위해 HTML의 <img> 요소와 자바스크립트의 Image 객체를 활용합니다.
이미지를 로드한 뒤, 이미지 객체의 naturalWidth와 naturalHeight 속성을 통해 가로와 세로 크기를 얻을 수 있습니다.
아래는 간단한 예제 코드입니다.[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 크기 확인</title>
</head>
<body>
<script>
function getImageSize(url) {
const img = new Image();
// 이미지가 로드되었을 때 실행될 이벤트 핸들러
img.onload = function() {
console.log(`이미지 가로: ${img.naturalWidth}px`);
console.log(`이미지 세로: ${img.naturalHeight}px`);
alert(`이미지 크기: ${img.naturalWidth} x ${img.naturalHeight}`);
};
// 이미지 로드 중 에러가 발생했을 때 실행될 이벤트 핸들러
img.onerror = function() {
console.error("이미지를 불러오는 중 오류가 발생했습니다.");
alert("이미지를 불러오는 데 실패했습니다.");
};
// 이미지 URL 설정
img.src = url;
}
// 함수 호출
const imageUrl = "https://example.com/sample.jpg"; // 확인할 이미지 URL
getImageSize(imageUrl);
</script>
</body>
</html>[/code]주요 포인트:
new Image() 객체
자바스크립트에서 동적으로 이미지를 로드하기 위해 사용됩니다.
onload 이벤트
이미지를 성공적으로 로드한 후 실행됩니다.
이 이벤트에서 naturalWidth와 naturalHeight를 사용해 크기를 확인합니다.
onerror 이벤트
이미지 로드에 실패했을 때 오류를 처리할 수 있습니다.
위 코드에서 imageUrl에 확인하려는 이미지의 URL을 넣으면 해당 이미지의 가로와 세로 크기를 출력합니다.
이를 위해 HTML의 <img> 요소와 자바스크립트의 Image 객체를 활용합니다.
이미지를 로드한 뒤, 이미지 객체의 naturalWidth와 naturalHeight 속성을 통해 가로와 세로 크기를 얻을 수 있습니다.
아래는 간단한 예제 코드입니다.[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 크기 확인</title>
</head>
<body>
<script>
function getImageSize(url) {
const img = new Image();
// 이미지가 로드되었을 때 실행될 이벤트 핸들러
img.onload = function() {
console.log(`이미지 가로: ${img.naturalWidth}px`);
console.log(`이미지 세로: ${img.naturalHeight}px`);
alert(`이미지 크기: ${img.naturalWidth} x ${img.naturalHeight}`);
};
// 이미지 로드 중 에러가 발생했을 때 실행될 이벤트 핸들러
img.onerror = function() {
console.error("이미지를 불러오는 중 오류가 발생했습니다.");
alert("이미지를 불러오는 데 실패했습니다.");
};
// 이미지 URL 설정
img.src = url;
}
// 함수 호출
const imageUrl = "https://example.com/sample.jpg"; // 확인할 이미지 URL
getImageSize(imageUrl);
</script>
</body>
</html>[/code]주요 포인트:
new Image() 객체
자바스크립트에서 동적으로 이미지를 로드하기 위해 사용됩니다.
onload 이벤트
이미지를 성공적으로 로드한 후 실행됩니다.
이 이벤트에서 naturalWidth와 naturalHeight를 사용해 크기를 확인합니다.
onerror 이벤트
이미지 로드에 실패했을 때 오류를 처리할 수 있습니다.
위 코드에서 imageUrl에 확인하려는 이미지의 URL을 넣으면 해당 이미지의 가로와 세로 크기를 출력합니다.
댓글목록
등록된 댓글이 없습니다.
  |