자바스크립트 이미지로드(loadImage)

동기

모바일 기기에서 사진 파일 선택시, 즉석으로 카메라를 찍을 경우 인터넷익스플로러11, 삼성브라우저(갤럭시), 사파리(애플) 등의 일부 브라우저는 카메라 아랫부분을 유지해주는 기능(image orientation)이 지원되지 않는다.

(브라우저별 지원여부 확인 : https://caniuse.com/#search=orientation%20image)

따라서 파일을 읽어서 화면에 뿌려보면 이상한 방향으로 사진이 보일 경우가 많은데, 이 라이브러리를 사용하면 사진을 제대로 볼 수 있다. 

 

간단사용방법

import loadImage from 'blueimp-load-image';

loadImage("Blob or File or Url", {
	orientation: true, // 이렇게 하면 어떤 브라우저로 카메라를 찍더라도 상하좌우가 유지된다.
})
.then(function(data) { // data는 img 객체로 반환되지만, 직접 뜯어서 내부를 볼 수도 있다.
  document.body.appendChild(data.image)
  console.log('Original image width: ', data.originalWidth)
  console.log('Original image height: ', data.originalHeight)
  console.log(data);
})
.catch(function (err) {
  console.log(err)
})

상세사용방법

https://github.com/blueimp/JavaScript-Load-Image/blob/master/README.md