🖼️ 자바스크립트 이미지 객체 사용법

Image 객체

보통 웹브라우저에서 이미지를 다룰일이 있다면, 자바스크립트로 <img> 태그를 생성하고 그 속성을 다룬다.

var x = document.createElement("IMG");

DOM 엘리먼트 api로 이미지를 다루는데는 큰 제약사항이 없긴 하지만, 자바스크립트에선 따로 image() 클래스를 제공해주기도 하는데, 이미지 클래스를 이용해 동적으로 이미지를 다룰수 있다.

예를들어, html에 이미지 태그의 src 부분 이미지 url을 변수를 통해 동적으로 제어할 필요성이 있거나, 웹브라우저에는 당장 표시하지않고 나중을 위해 이미지를 미리 로딩하려 할때나 이미지의 크기를 바로 구할 때 쓰일 수 있다.

---

Image 객체 사용법

 

Image 객체 생성

// image객체가 생성되어 속성들을 추가할수 있음
// new Image(width, height); 파라미터를 넣어 미리 크기를 지정 가능
const img = new Image(); 
						
// createElement('img') 처럼 dom에 <img> 태그를 추가할수있다.
document.body.appendChild(img);

 

이미지 로드해서 원본 크기 얻기

const IMG = new Image();
IMG.src = '이미지url';

// IMG.src 에 이미지 url을 넣으면 브라우저에서 이미지를 다운하게 되고 로드가 다되면 이벤트 발생
IMG.addEventListener('load', function() {
    console.log('높이 : ', this.naturalHeight , '너비 : ', this.naturalWidth, "이미지 : ", this.src);	
});

 

Image 속성

• border : 이미지의 테두리 값
• complete : 이미지 로드가 완료 되었는지 여부(true/false)
• height : 이미지의 높이
• width : 이미지의 가로크기
• hspace : 이미지의 수평여백
• vspace : 이미지의 수직여백
• length : 이미지의 갯수
• lowsrc : lowsrc 로 설정한 이미지의 URL
• name : 이미지의 name
• src : 이미지의 URL

 

Image 이벤트 핸들러

• onAbort : 사용자가 이미지 로딩을 중간에서 멈출때 발생하는 이벤트
• onError : 이미지 로딩중 에러가 발생했을때
• onLoad : 이미지가 성공적으로 로딩되었을때

const IMG = new Image();
IMG.src = '이미지url';

IMG.addEventListener('abort', () => {
	alert('이미지를 읽다가 중단되었습니다.')
})

IMG.addEventListener('error', () => {
	alert('이미지가 제대로 로딩되지 않았습니다.')
})

IMG.addEventListener('load', () => {
	alert('이미지가 성공적으로 로딩 되었습니다.')
})

---

Image 객체 사용 예제

See the Pen Imgae 객체 by barzz12 (@inpaSkyrim) on CodePen.

 

 

---

# 참고자료

http://www.ministory.net/xe/?mid=it_story&category=2963&page=9&document_srl=3024