[Q-Map] Javascript - Load - Image 라이브러리 사용하기

Javascript - Load - Image 라이브러리 사용하기

 사진의 meta data를 사용하기 위해서 외부 라이브러리를 사용하기로 했다. 

https://github.com/blueimp/JavaScript-Load-Image 에서 제공되는 Load - Image 라이브러리는 이미지 파일을 불러오고 변형할때 사용된다.

이미지는 File 또는 URL을 통해 로드할 수 있으며, 라이브러리에서 제공되는 method를 통해 이미지의 Exif tags 를 추출할 수 있다. 

Exif tag 란?

 교환 이미지 파일 형식 (Exif; EXchangable Image File format)은 디지털 카메라에서 이용되는 이미지 파일 포맷이다. 이 데이터는 JPEG, TIFF 6.0과 RIFF, WAV 파일 포맷에서 이용되며 사진에 대한 정보를 포함하는 메타데이터를 추가한다. Exif는 JPEG 2000, PNG나 GIF 파일에서는 지원하지 않는다.

Exif 메타데이터는 카메라 제조사, 카메라 모델, 회전 방향, 날짜와 시간, 색 공간, 초점 거리, 플래시, ISO 속도, 조리개, 셔터 속도, gps 등의 정보를 제공한다.

이미지를 로드하여 meta data 추출하기

 Load - Image 라이브러리에 loadImage() method를 통하여 이미지를 로드한다.

document.getElementById('file-input').onchange = function (e) {
    var loadingImage = loadImage(
        e.target.files[0],
        function (img) {
            document.body.appendChild(img);
        },
        {maxWidth: 600}
    );
    if (!loadingImage) {
        // Alternative code ...
    }
};

parseMetaData() method를 통해 필요한 Exif tag를 추출한다.

loadImage.parseMetaData(
    fileOrBlob,
    function (data) {
        if (!data.imageHead) {
            return;
        }
        // Combine data.imageHead with the image body of a resized file
        // to create scaled images with the original image meta data, e.g.:
        var blob = new Blob([
            data.imageHead,
            // Resized images always have a head size of 20 bytes,
            // including the JPEG marker and a minimal JFIF header:
            loadImage.blobSlice.call(resizedImage, 20)
        ], {type: resizedImage.type});
    },
    {
        maxMetaDataSize: 262144,
        disableImageHead: false
    }
);

GPS와 관련된 Exif tag는 다음과 같다.

        0x0001 : "GPSLatitudeRef",

        0x0002 : "GPSLatitude",

        0x0003 : "GPSLongitudeRef",

        0x0004 : "GPSLongitude",

이외의 필요한 Exif tag는 https://github.com/exif-js/exif-js/blob/master/exif.js 에서 찾을 수 있다.