Javascript & JQuery & CSS

JQUERY PLUGIN을 이용해 이미지 ORIENTATION EXIF 정보 찾기

이번 포스팅에서는 jQuery 를 이용해 이미지가 촬영된 방향을 찾는 방법에 대해 알아보려 한다. 최근에 휴대폰으로 사진을 찍는 경우가 매우 많다. 

그렇게 촬영된 이미지들은 사실 언제나 같은 방향으로 찍혀져 있는 것을 볼 수 있다. 

(물론 최근에 나온 이미지 뷰어들은 자동으로 보정된다…)내가 폰을 어떻게 들고 촬영했는지에 따라 이미지자체가 바뀌어서 저장되는 것이 아니라, 

폰의 방향을 이미지의 EXIF 정보에만 기록하도록 되어 있기 때문이다.

대부분의 사진을 공유하는 서비스들은 이러한 정보를 활용하여 이미지를 보정해서 보여주기 때문에, 별 생각하지 않고 넘어갈 수 있지만 만약에 

우리가 개발자의 입장으로 이러한 서비스를 개발하게 된다면 이러한 부분을 고려하지 않을 수는 없을 것이다. 

PHP 혹은 JSP 같은 언어들은 이러한 EXIF 정보를 활용할 수 있는 방법들이 많이 존재하며 기본 라이브러리에도 많이 반영되어 있다. 

하지만, HTML+JS 로만 개발해야 되는 환경에서는 이러한 방법들을 모두 사용할 수 없기 때문에 다른 방법을 사용해야 한다.

여기에 플리커 에서는 이러한 방법에 대해 자세하게 기록한 테크리포트를 작성하였다.

다만, 해당 내용을 읽어보면 알겠지만, 무척 복잡한 방법을 사용하여야 한다….

그래서 다양한 오픈소스들을 검색해 보았고, 괜찮은 오픈소스를 찾게 되었다.

바로  Jacob Seidelin 이 개발한 jQuery Exif JS 이다. 라이센스는  MPL 1.1 을 사용한다.

(http://blog.nihilogic.dk/2008/05/jquery-exif-data-plugin.html)

우선 이 분께서는 먼저 EXIF-JS 라는 자바스크립트 라이브러리를 먼저 배포하고 있었는데, 이에 대한 jQuery 버전을 추가로 만들어서 배포하고 있다.

퓨어 자바스크립트 버전은 여기서 받을 수 있다.

다만 테스트를 진행하는 도중 크롬에서 동작하지 않는 버그를 발견해서 찾은 것이 jQuery 버전이다.

(블로그 주소는 http://blog.nihilogic.dk/ 인데, 이상하게 필자의 PC에서는 Labs가 접속이 되질 않는다. )

.

? 라이브러리의 사용

그럼 이 라이브러리에 대해 좀 더 알아보자. 라이브러리의 코드는 여기

먼저, 가장 중요한 것이 이 라이브러리는 이미지를 Ajax call 해서 가져오는 방식을 사용하기 때문에 로컬 서버라도 띄워서 테스트해야 한다는 것이다.

필자는 file:// 프로토콜로 테스트를 하다가 많은 시간을 “왜 안되지?” 하는데 잡아먹었다….

자 그럼 어떻게 사용하는지 아래의 코드를 보겠다.



<img id="img1" alt="" src="img1.jpg" />

$('#img1').bind('click', function(){
    alert($(this).exif('Orientation') );
});




아주 간단하다. 먼저 img 태그에 exif=”true” 라는 속성을 추가한다.
그 다음 jQuery 문법으로 exif(“속성”) 을 사용하면 데이터를 받아 올 수 있다. 사진의 방향은 Orientation 속성에 있다.

헌데 이렇게 코드를 사용해보면 정수형의 숫자로 표시되는 것을 볼 수 있다. 해당하는 숫자의 의미는 다음과 같다

대부분의 사진은 1, 6, 8 의 Orientation 값을 가지고 있을 것이다.

이제 해당하는 각도로 사진을 회전시키면 된다. . . . . .

그런데 지금까지 HTML-JS 로만 개발할 때의 상황이었는데, 사진을 회전시키면 된다고 설명하고 끝맺으면 이부분에서 다시 막힐 것이다. 

CSS3 에 image-orientation 이란 속성이 있는데 이것을 지원하지 않는 브라우저도 꽤 있기 때문이다.

그래서 jQuery 플러그인을 하나더 소개하려 한다. 바로 jQueryRotate 이다.

MIT 라이센스이며 바로 최근까지도 업데이트 되고 있기에 꽤 신뢰성 있는 라이브러리 이다.

TIP ? 만약 HTML5 지원이 잘 안되는 브라우져를 사용한다면 아래의 코드를 헤드에 넣는 것 잊지말자



<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->



[테스트 예제보기]