exif-js 이미지의 메타데이터를 추출하는 스크립트

프론트단에서 이미지의 메타데이터를 추출할 수 있는 편리한 JS.

 

# js cdn

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

* jquery 라이브러리는 없어도됨. 하지만 예제에서는 사용할 예정이라서 선언.

 

EXIF.getData의 함수를 통하여, EXIF.pretty를 확인하여 추출이 가능한지를 체크하고, 

EXIF.getTag를 통하여 메타데이터를 파싱할 수 있음.

EXIF.getTag로 추출할 수 있는 메타데이터는 아래와 같다.

Make                              기종
Model                             모델명
ImageUniqueID                	  사진고유번호
ShutterSpeedValue                 셔터속도
Software                          소프트웨어
ImageWidth, ImageHeight           해상도(가로, 세로)
DateTimeOriginal                  사진원본일
DateTimeDigitized                 사진촬영일자(셔터를 누른 순간)
DateTime                          사진편집일자
GPSLatitude                       위도
GPSLatitudeRef                    North(N, 북위, 양수), South(S, 남위, 음수)
GPSLongitude                      경도
GPSLongitudeRef                   East(E, 동경, 양수), West(W, 서경, 음수)

* 사진원본일과 사진촬영일자, 사진편집일자가 서로 다르거나 등등 날짜 관계에 의해 앞뒤가 맞지 않다면, 

  사진 조작 가능성이 있다는 부분.

 

전반적인 파싱 부분은 아래와 같이 할 수 있다.

EXIF.getData(file, function () {
	if(EXIF.pretty(this)) {
		EXIF.getTag(this, "Make"),
		EXIF.getTag(this, "Model"),
		EXIF.getTag(this, "ImageUniqueID"),
		EXIF.getTag(this, "ShutterSpeedValue"),
		EXIF.getTag(this, "Software"),
		EXIF.getTag(this, "ImageWidth"),
		EXIF.getTag(this, "ImageHeight"),
		EXIF.getTag(this, "DateTimeOriginal"),
		EXIF.getTag(this, "DateTimeDigitized"),
		EXIF.getTag(this, "DateTime"),
		EXIF.getTag(this, "GPSLongitude"),
		EXIF.getTag(this, "GPSLongitudeRef"),
		EXIF.getTag(this, "GPSLatitude"),
		EXIF.getTag(this, "GPSLatitudeRef")
	}
});

 

* 위도, 경도는 북위, 동경에 따라 아래와 같이 계산을 해주면 된다.

var La = EXIF.getTag(this, "GPSLatitude");

▶ GPSLatitudeRef가 'S' 일 경우, 위도는 -1 * La[0] + (-60 * La[1] + -1 * La[2]) / 3600 이 되고,
▶ GPSLatitudeRef가 'N' 일 경우, 위도는 La[0] + (60 * La[1] + La[2]) / 3600) 가 된다.


var Lo = EXIF.getTag(this, "GPSLongitude");

▶ GPSLongitudeRef가 'W' 일 경우, 경도는 -1 * Lo[0] + (-60 * Lo[1] + -1 * Lo[2]) / 3600 이 되고,
▶ GPSLongitudeRef가 'E' 일 경우, 경도는 Lo[0] + (60 * Lo[1] + Lo[2]) / 3600)가 된다.

 

위 내용을 토대로 만들어본 예제!

---

EXIF 데이터 확인

★ 업로드없이 script의 temp로 이미지 미리보기

★ 메타데이터 확인

---

 

테스트하더라도. 이미지를 저장시키거나 하지는 않으니 안심해도 됨.

안심이 되는 짤 투척.

 

 

 

# 레퍼런스

https://github.com/exif-js/exif-js

GitHub - exif-js/exif-js: JavaScript library for reading EXIF image metadata