การใช้ Javascript อ่าน exif ของรูปภาพและใช้ร่วมกับ google map api

ในรูปภาพที่เราถ่านในปัจจุบันจะมี ข้อมูลต่างๆฝังอยู่ด้วยเช่น วันเวลา กล้องที่ใช้ โลเคชั่นและอื่นๆอีกมากมาย เรียกว่า Exif ซึ่งเป็น metadata วันนี้ผมจึงลองใช้ หา lib js สำหรับอ่านค่าข้อมูล exif มาชื่อว่า exif-js  เพื่ออ่านค่าและนำค่า Location มาทำการใส่ใน google map

เรามาดูตัวอย่างกันครับ กดที่นี่เพื่อดูเต็มจอ

จากตัวอย่างผมเอารูปที่ถ่ายจากสนามบอลเมืองทองก็ได้ location ที่ถูกต้อง แต่ทุกรูปอาจจะไม่มีข้อมูลเสมอไปครับ

เรามาดูวิธีการทำงานกัน

1. ในส่วนแสดงผลนั้นเราจะมีจุดสำคัญที่เป็น html ประกอบด้วย

<!-- tag input สำหรับ upload file ใช้ class imageupload -->
<input type="file" name="file" class="imageupload" accept="image/*">

<!-- tag image สำหรับแสดงไฟล์ที่ upload -->
<img style="max-width:100%;width:100%;" class="imageshow" src="lo1.JPG">

<!-- iframe สำหรับแสดง google map  -->
<iframe class="gmap" width="100%" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=""></iframe> 

<!-- tag div สำหรับแสดงข้อมูล exif ที่ได้ -->
<div style="padding:10px 25px;" class="dataimage"></div>

2. ส่วนขอ js ที่ใช้ควบคุมการทำงาน
– ส่วน event เมื่อ user เลือก upload ไฟล์

$(".imageupload").change(function() {

$(".gmap").attr("src",""); // ล้างค่า google map
$(".dataimage").html(""); // ล้างค่า exif ใน div

  readURLimage(this); // เรียกใช้ function readURLimage   this คือ tag input file ที่ส่งเข้าไปใน function นี้
 
});

– ส่วน function readURLimage ซึ่งถือเป็นหัวใจหลักของการทำงาน

   function readURLimage(input) {

  if (input.files && input.files[0]) { // ตรวจสอบว่ามีไฟล์หรือเปล่า
    var reader = new FileReader();

    reader.onload = function(e) {  
       
       
          $(".imageshow").attr("src", e.target.result);  // tag img แสดงรูปภาพที่ upload
           
           
           var image = new Image();    // สร้าง object image มาใหม่
            image.onload = function() {   // event onload
                EXIF.getData(image, function() {     // เรียกใช้ exifjs
                   var html ;
                   var alltag = EXIF.getAllTags(this); // เรียก tag meta ทั้งหมดของรูปมาเก็บไว้ในตัวแปร
                   var longti = converttogooglemap(EXIF.getTag(this, 'GPSLongitude')); // เรียก GPS Longitude ไว้ในตัวแปร 
                   var latti  = converttogooglemap(EXIF.getTag(this, 'GPSLatitude')); // เรียก GPS Latitued ไว้ในตัวแปร
                                 // *function converttogooglemap นั้นเป็น function สำหรับแปลงค่า location ใหม่เพราะ exif เก็บเป็น array 
                                              
                   
                 $.each(alltag, function( index, value ) {  // loop ข้อมูล exit มาเก็บไว้ในตัวแปรเพื่อแสดงผล
                     html += index +" : " + value + "<br>"; 
                  });
                 
                                               
                  $(".dataimage").html(html); // นำข้อมูล exif มาแสดงผล
                  
                  // set location ให้google map  
                  $(".gmap").attr("src","https://www.google.com/maps/embed/v1/place?q="+latti+","+longti+"&key=AIzaSyCjm7uGJ_8lbE2MWsIAhaGZI0F0m5u4ITc");
            
                });
            };
           
           image.src =   e.target.result;
    }

    reader.readAsDataURL(input.files[0]);
  }
}

ในการใช้ google map api นั้น ผมต้อง key ในตัวอย่างให้แสดงได้ใน domain webunique เท่านั้น หาก download code ไปต้องไปสมัคร google map embed api แล้วเปลี่ยน key แผนที่ถึงจะแสดงผล

มีข้อสงสัยแนะนำได้ครับ

สามารถลองเอา code ไปศึกษาได้

Download Source Code