Javascript 로 image의 가로 세로 크기 구하기

1. 개요

Javascript로 image 의 정보 를 알아보고 싶을 때가 있다. javascript에서 image를 단순히 import하는 것으로는 그저 파일 자체로 표현이 되거나, path 정보만 들어 있는 경우가 대부분이다.

이미지의 크기를 계산하기 위해서는 정보를 javascript에서 구해낼 필요가 있다. 그때를 위해 존재하는 함수가 Image 함수 이다.

• Image

2. Image 함수

선언 방법은 아래와 같이 Image 함수의 인스턴스 를 생성하면 된다.

const img = new Image()

위의 img 인스턴스를 만든 후 image의 path 혹은 url 을 설정해주면 다음의 img 인스턴스는 해당 image의 정보를 모두 가진 image 변수가 된다.

img.src = "../imagePath"

image 인스턴스 변수의 설정이 되고 나면 width , height 를 이용하여 사진의 가로, 세로의 높이를 구할 수 있다.

img.width
//=> 500
img.height
//=> 900