※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
1 2 3 4 5 6 7 |
<body> <button onclick="getPicture()" style="margin:20px 0 0 0;">写真選択</button> <div id="image"></div> <div>緯度:<span id="latitude">???</span></div> <div>経度:<span id="longitude">???</div></div> <div id="mapLink"></div> </body> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<script> // 座標の数値(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('位置情報なし'); $('#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> |
画像をサーバーにアップロード
※リサイズする処理を追加しないと送信に時間がかかる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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)); }, }); } |