이미지, 동영상, 텍스트 가로 세로 사이즈 구하기

이미지를 서버로 읽어들이지 않고 클라이언트 측에서 이미지의 크기를 확인하려면 JavaScript를 사용하여 클라이언트 측에서 이미지 객체를 생성하고 크기를 확인하는 방법이 있습니다. 이 방법은 이미지를 브라우저에서 렌더링할 때만 사용할 수 있으며, 이미지 파일 자체를 서버로 전송하지 않습니다.

예를 들어, JavaScript를 사용하여 이미지 객체를 생성하고 크기를 얻는 코드는 다음과 같을 수 있습니다.

var img = new Image();
img.onload = function() {
    var width = this.width;
    var height = this.height;
    console.log("가로 크기: " + width + " 픽셀, 세로 크기: " + height + " 픽셀");
};
img.src = 'path/to/your/image.jpg';  // 이미지 파일 경로 설정

이 코드는 브라우저에서 이미지를 로드하고, 이미지가 로드되면 해당 이미지의 가로 및 세로 크기를 출력합니다.

 

JavaScript를 사용하여 동영상의 크기를 얻으려면 비디오 엘리먼트를 생성하고 해당 비디오가 로드될 때 크기를 확인하는 방법을 사용할 수 있습니다. 아래는 비디오 크기를 얻는 예제 코드입니다.

var video = document.createElement('video');

video.onloadedmetadata = function() {
    var width = this.videoWidth;
    var height = this.videoHeight;
    console.log("가로 크기: " + width + " 픽셀, 세로 크기: " + height + " 픽셀");
};

video.src = 'path/to/your/video.mp4';  // 동영상 파일 경로 설정

이 코드는 비디오 엘리먼트를 생성하고, 비디오가 로드될 때 onloadedmetadata 이벤트 핸들러를 통해 비디오의 가로 및 세로 크기를 얻어옵니다.

 

텍스트의 가로 크기를 측정하려면 JavaScript에서 DOM 요소를 생성하고 해당 텍스트를 포함한 후, 해당 요소의 가로 크기를 측정합니다. 아래는 이 작업을 수행하는 예제 코드입니다.

<div id="txt">텍스트의 실제 가로 크기</div>

var mvElement = document.getElementById('txt');
var textContent = mvElement.textContent;

var measureElement = document.createElement('span');
measureElement.style.visibility = 'hidden'; // 화면에 표시되지 않도록 숨김
measureElement.style.whiteSpace = 'nowrap'; // 텍스트가 줄 바꿈되지 않도록 설정
measureElement.innerText = textContent;

document.body.appendChild(measureElement); // 문서에 추가
var textWidth = measureElement.offsetWidth;
document.body.removeChild(measureElement); // 추가한 요소 제거

console.log("mv 내 텍스트의 실제 가로 크기: " + textWidth + " 픽셀");

이 코드는 span 요소를 생성하고 해당 요소에 텍스트를 설정한 후, 화면에 표시되지 않도록 스타일을 설정하고 body에 추가한 뒤 가로 크기를 측정합니다. 측정이 끝나면 해당 요소를 문서에서 제거합니다. 결과적으로 textWidth 변수에는 txt 내 텍스트의 실제 가로 크기가 저장됩니다.