반응형
자바스크립트를 사용하여 원격지 이미지를 로드한 후 해당 이미지의 가로와 세로 크기를 확인할 수 있습니다.
이를 위해 HTML의 <img> 요소와 자바스크립트의 Image 객체를 활용합니다.
이미지를 로드한 뒤, 이미지 객체의 naturalWidth와 naturalHeight 속성을 통해 가로와 세로 크기를 얻을 수 있습니다.
아래는 간단한 예제 코드입니다.
<!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>주요 포인트:
- new Image() 객체
- 자바스크립트에서 동적으로 이미지를 로드하기 위해 사용됩니다.
- onload 이벤트
- 이미지를 성공적으로 로드한 후 실행됩니다.
- 이 이벤트에서 naturalWidth와 naturalHeight를 사용해 크기를 확인합니다.
- onerror 이벤트
- 이미지 로드에 실패했을 때 오류를 처리할 수 있습니다.
위 코드에서 imageUrl에 확인하려는 이미지의 URL을 넣으면 해당 이미지의 가로와 세로 크기를 출력합니다.
반응형
'PHP∵SCRIPT' 카테고리의 다른 글
| 코딩할때 유용한 php 정규표현식 (1) | 2024.11.27 |
|---|---|
| PHP 5.2 이하에서 JSON 사용하기 (1) | 2024.11.26 |
| 알아두면 편리한 MySQL 쿼리문 (1) | 2024.11.16 |
| MySQL 및 JavaScript를 사용한 PHP 채팅 웹 애플리케이션 (0) | 2024.11.13 |
| PHP를 사용하여 올해 남은 일수를 계산하고 표시하는 간단한 코드 (0) | 2024.11.11 |
| PHP에서 <span> 태그를 제거하는 정규식 (0) | 2024.11.08 |
| Ajax + PHP 를 이용하여 동작하는 실시간 채팅 입니다. (2) | 2024.11.07 |
| PHP ucfirst() 함수 (0) | 2024.10.21 |
댓글