Monaca（cordova）で画像の位置情報を取得

※iPhoneの写真の形式がheifになったため、この方法では取得できなくなりました。
　2017/12現在、Javascriptでheif画像の位置情報を取得するライブラリは無さそうです。。

タグ内にMETAタグの追加

下記のmetaタグを追加する。重要なのは「cdvfile」の部分。
これがないと、cdvfile://のコルドバ独自のURLで画像が表示できない。

1	<meta http-equiv="Content-Security-Policy" content="default-src * data: cdvfile: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

jQueryとjQueryプラグインの読み込み

使うのはjQueryとjquery.exif.js

1 2	<script src="https://code.jquery.com/jquery-1.9.0.js"></script> <script src="./jquery.exif.js"></script>

HTML

<body>

</body>

JavaScript

// 座標の数値(60進数)を一般的に利用する形式（10進数）に変換

// 参考：https://syncer.jp/php-exif-read-data

function get_10_from_60_exif( ref , gps ) {

// 60進数から10進数に変換

var data = gps[0] + ( gps[1]/60 ) + ( gps[2]/3600 ) ;

//南緯、または西経の場合はマイナスにして返却

return ( ref=='S' || ref=='W' ) ? ( data * -1 ) : data ;

}

// 写真ピッカーを起動

function getPicture(){

navigator.camera.getPicture(onSuccess, onFail, {

quality: 100,

destinationType: Camera.DestinationType.NATIVE_URI,

sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,

correctOrientation: true,

encodingType: Camera.EncodingType.JPEG,

});

}

// 写真選択が成功した時のコールバック

function onSuccess (imageURI) {

window.resolveLocalFileSystemURL(imageURI, function(fileEntry){

fileEntry.file(

function(file){

// サムネイルを挿入

$('#image').html('<img src="'+file.localURL+'" style="width:100%;height:auto;">');

var reader = new FileReader();

reader.onloadend = function() {

// blob型に変換

var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });

// 写真をExifをjQueryプラグイン「jQuery fileEXIF」で取得

// ダウンロード：https://plugins.jquery.com/file-exif/

$.fileExif(blob,function(exif){

if(typeof exif.GPSLatitude != 'undefined' && typeof exif.GPSLongitude != 'undefined') {

// 座標の数値(60進数)を一般的に利用する形式（10進数）に変換

var latitude = get_10_from_60_exif(exif.GPSLatitudeRef, exif.GPSLatitude);

var longitude = get_10_from_60_exif(exif.GPSLongitudeRef, exif.GPSLongitude);

// 表示する

$('#latitude').text(latitude);

$('#longitude').text(longitude);

$('#mapLink').html('<a href="http://maps.google.co.jp/maps?q='+latitude+' '+longitude+'">地図で確認</a>');

} else {

$('#latitude, #longitude').text('位置情報なし');

$('#mapLink').empty();

}

});

};

reader.readAsArrayBuffer(file);

function(error){

alert('error:fileEntry.file()')

}

);

}, function(error){

alert('error:resolveLocalFileSystemURL()')

});

}

// 写真選択が失敗した時のコールバック

function onFail (message) {

alert ('Error occured: ' + message);

}

</script>

画像をサーバーにアップロード

※リサイズする処理を追加しないと送信に時間がかかる。

function upload(blob) {

var formData = new FormData();

formData.append('image', blob);

$.ajax({

type: 'POST',

url: "upload.php",

data: formData,

dataType: false,

processData: false,

contentType: false,

success:function(e, dataType){

alert(JSON.stringify(e))

error: function(XMLHttpRequest, textStatus, errorThrown){

alert('upload error:' + JSON.stringify(XMLHttpRequest));

});

}